dataTablas Ajax分页 ThinkPHP
来源:互联网 发布:淘宝海尔官方旗舰店 编辑:程序博客网 时间:2024/05/29 03:08
前端代码,php的有空再整理完发出来
研究了2天弄出来,苦逼
<div class="row"> <div class="col-xs-12"> <div class="table-responsive"> <table id="sample-table-2" class="table table-striped table-bordered table-hover"> <label> <input type="text" class="form-control fuzzy-search" placeholder="搜索"> </label> <button type="submit" class="dataTable-sub">搜索</button> <thead> <tr> <th class="center"> <label> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </th> <th>路由</th> <th>在线人数</th> <th>订单</th> </tr> </thead> <tbody> </tbody> </table> </div> </div></div><script type="text/javascript"> $(function () { //提示信息 var lang = { "sProcessing": "搜索中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "没有数据", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //初始化表格 var table = $("#sample-table-2").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 //stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 orderMulti: false, //启用多列排序 //order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui pagingType: "simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers columnDefs: [ { "orderable": false, "targets": [ 0,3] } ], order: [ [ 2, 'desc' ] ], //option显示数量 "aLengthMenu": [[20, 50, 100, 500, -1], [20, 50, 100, 500, "所有"]], "iDisplayLength": 20, //默认显示20条 /*columnDefs: [{ "targets": 'nosort', //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }],*/ ajax: function (data, callback, settings) { //封装请求参数 var param = userManage.getQueryCondition(data); /*param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候 param.start = data.start;//开始的记录序号 param.page = (data.start / data.length)+1;//当前页码*/ console.log(param); //ajax请求数据 $.ajax({ type: "GET", url: "{:U('ApMain/getData')}", cache: false, //禁用缓存 data: param, //传入组装的参数 dataType: "json", success: function (result) { console.log(result); //setTimeout仅为测试延迟效果 setTimeout(function () { //封装返回数据 var returnData = {}; returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回 returnData.recordsTotal = result.total;//返回数据全部记录 returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果 returnData.data = result.data;//返回的数据列表 console.log(returnData); //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染 //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕 callback(returnData); }, 200); } }); }, //列表表头字段 columns: [{ "data": "id" , render: function(data, type, full){ return "<label><input type='checkbox' class='ace' box='checkbox' value='"+full.id+"' /><span class='lbl'></span></label>"; } },{ "data": "gw_id", render: function(data, type, full){ var str = "{:U('ApMain/detail', array('id'=>'full_id'))}"; var url = str.replace('full_id', full.id); var gw = full.gw_id; if(full.comment) { return "<a href="+url+">"+gw.substr(-6, 6)+"("+full.comment+")</a>"; } else{ return "<a href="+url+">"+gw.substr(-6, 6)+"</a>"; } } }, { "data": "onuser" }, { "data": "gw_id" , render: function(data, type, full){ var str,url,full_gw; str = "{:U('控制器/模板', array('gw'=>'full_gw'))}"; url = str.replace('full_gw', full.gw_id); return "<a href="+url+">查看</a>"; } } ] }).api(); //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 //点击搜索 $('.dataTable-sub').click(function(){ table.draw(); }); $('table th input:checkbox').on('click' , function(){ var that = this; $(this).closest('table').find('tr > td:first-child input:checkbox') .each(function(){ this.checked = that.checked; $(this).closest('tr').toggleClass('selected'); }); }); }); //参数处理 var userManage = { currentItem : null, getQueryCondition : function(data) { var param = {}; //组装排序参数 if (data.order&&data.order.length&&data.order[0]) { switch (data.order[0].column) { case 1: param.order = "comment"; break; case 2: param.order = "onuser"; break; default: param.order = "onuser"; break; } param.sort = data.order[0].dir; } //查询参数 param.fuzzy = $(".fuzzy-search").val(); //组装分页参数 param.start = data.start; param.length = data.length; return param; } }</script>
0 0
- dataTablas Ajax分页 ThinkPHP
- ThinkPHP Ajax分页处理
- thinkphp-ajax分页
- thinkphp -ajaxpage --ajax分页
- ThinkPHP & Jquery Ajax分页演示
- ThinkPHP & Jquery Ajax分页演示
- thinkphp ajax菜单与分页
- ajax+thinkphp框架实现无刷新分页
- ajax+thinkphp框架实现无刷新分页
- thinkphp下实现ajax无刷新分页
- ThinkPHP结合laypage实现ajax分页
- ThinkPHP使用ajax分页操作,带分页类下载
- thinkphp中使用ajax实现无刷新分页
- Jquery+ajax+PHP 基于thinkPHP的无刷新分页
- thinkphp中分页类改写,实现类似ajax效果;
- Thinkphp 不修改原生类条件下ajax分页的实现
- Thinkphp 3.23 页面上拉加载 基于ajax分页
- thinkphp ajax无刷新分页类及实例
- Eclipse Luna(4.4) 安装tomcatPlugin
- 修改UITextfield的Placeholder字体的颜色
- Mac终端配色方案【转】
- js中的函数劫持
- Dockerfile使用详解
- dataTablas Ajax分页 ThinkPHP
- oracle中char与varchar2的区别
- Runtime(动态添加方法)笔记
- 七大排序之堆排序
- 【中国标准】 DRA音频标准是什么概念?
- 润乾报表制作折叠报表
- C++幼儿园[0] - 前言
- ContextLoaderListener类(spring源码解析)
- 排序算法之希尔排序(Java)