欢迎光临
我们一直在努力

datatable服务器端分页

html代码

<table cellpading="0" cellspacing="0" border="0" class="dTable acelistTable"> <thead> <tr> <th>用户名</th> <th>跟随</th> <th>新外汇指数</th> <th>月均交易(手)</th> <th>账户余额($)</th> <th>近一个月收益</th> <th>当前持仓(单)</th> <th>浮动收益($)</th> <th>状态</th> <th>操作</th> </tr> </thead> <!--tbody可以不写--> <!--<tbody></tbody>--> <!--tfoot 可选--> <tfoot> <tr> <th>用户名</th> <th>跟随</th> <th>新外汇指数</th> <th>月均交易(手)</th> <th>账户余额($)</th> <th>近一个月收益</th> <th>当前持仓(单)</th> <th>浮动收益($)</th> <th>状态</th> <th>操作</th> </tr> </tfoot> </table>

js代码

 var oTable = $('.acelistTable').dataTable( { "sPaginationType": "full_numbers", //分页风格,full_number会把所有页码显示出来(大概是,自己尝试) "sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充 "iDisplayLength": 10,//每页显示10条数据 "bAutoWidth": false,//宽度是否自动,感觉不好使的时候关掉试试
"bLengthChange": false,
"bFilter": false,
"oLanguage": {//下面是一些汉语翻译 "sSearch": "搜索", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条", "sInfoFiltered": "(筛选自 _MAX_ 条数据)", "sInfoEmtpy": "没有数据", "sProcessing": "正在加载数据...", "sProcessing": "<img src='{{rootUrl}}global/img/ajaxLoader/loader01.gif' />", //这里是给服务器发请求后到等待时间显示的 加载gif "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "末页" } }, "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好 "bServerSide": true, //开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。 "sAjaxSource": "{{rootUrl}}ace_management/ace_list", //给服务器发请求的url "aoColumns": [ //这个属性下的设置会应用到所有列,按顺序没有是空 {"mData": 'nickname'}, //mData 表示发请求时候本列的列明,返回的数据中相同下标名字的数据会填充到这一列 {"mData": 'follower_count'}, {"mData": 'rank'}, {"mData": 'month_count'}, {"mData": 'equity'}, {"mData": 'month_ror'}, {"mData": 'now_orders'}, {"mData": 'profit_total'}, {"sDefaultContent": ''}, // sDefaultContent 如果这一列不需要填充数据用这个属性,值可以不写,起占位作用 {"sDefaultContent": '', "sClass": "action"},//sClass 表示给本列加class ], "aoColumnDefs": [//和aoColums类似,但他可以给指定列附近爱属性 {"bSortable": false, "aTargets": [1, 3, 6, 7, 8, 9]}, //这句话意思是第1,3,6,7,8,9列(从0开始算) 不能排序 {"bSearchable": false, "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9]}, //bSearchable 这个属性表示是否可以全局搜索,其实在服务器端分页中是没用的 ],
"aaSorting": [[2, "desc"]], //默认排序
"fnRowCallback": function(nRow, adata, iDisplayIndex) {// 当创建了行,但还未绘制到屏幕上的时候调用,通常用于改变行的class风格 if (aData.status == 1) { $('td:eq(8)', nRow).html("<span class='text-error'>审核中</span>"); } else if (aData.status == 4) { $('td:eq(8)', nRow).html("<span class='text-error'>审核失败</span>"); } else if (aData.active == 0) { $('td:eq(8)', nRow).html("<span>隐藏</span>"); } else { $('td:eq(8)', nRow).html("<span class='text-success'>显示</span>"); } $('td:eq(9)', nRow).html("<a href='' user_id='" + aData.user_id + "' class='ace_detail'>详情</a>"); if (aData.status != 1 && aData.status != 4 && aData.active == 0) { $("<a class='change_ace_status'>显示</a>").appendTo($('td:eq(9)', nRow)); } else if (aData.status != 1 && aData.status != 4 && aData.active == 1) { $("<a class='change_ace_status'>隐藏</a>").appendTo($('td:eq(9)', nRow)); } return nRow; }, "fnInitComplete": function(oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略 $("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "请输入高手用户名"); } } );

 

服务器端代码

先说一下我们需要的目标格式是这样

是一个json串

接着上php代码

上面displaytotal的处理方式有问题,当全局搜索存在时, displaytotal等于按条件搜索的全部数量,注意自己该下

 

 

有个需求要求打开某个页面,会自动列出所有数据,然后上面有表单个提交,要求提交表单后表格数据刷新。

实现办法就是表单用js验证成功后组织一个加上参数的url,最后

 

 

  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《datatable服务器端分页》
文章链接:https://www.456zj.com/6334.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址