刚开始接触jquery这个$().dateTable({}); 这个用法的时候 也是一脸蒙B ,现在借着用机会,整理下这个方法 ,真的很方便 很容易操作,远胜于以前的标签开发模式;
function renderTablesProducts(){ $('#provider_table_products').dataTable({ "bProcessing": true,//进度条 "bDestroy":true, "bPaginate": true,//翻页功能 "bAutoWidth": false,//自动宽度 "bFilter": false,//过滤功能 "bSort": true,//排序功能 "bLengthChange":false,//不允许用户改变分页大小 "bServerSide": true, "oLanguage" : { "sLengthMenu" : "每页显示 _MENU_ 条记录", "sZeroRecords" : "对不起,没有匹配的数据", "sInfo" : "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据", "sInfoEmpty" : "没有匹配的数据", "sInfoFiltered" : "(数据表中共 _MAX_ 条记录)", "sProcessing" : "正在加载中...", "oPaginate" : { "sFirst" : "第一页", "sPrevious" : " 上一页 ", "sNext" : " 下一页 ", "sLast" : " 最后一页 " } }, "sAjaxSource": "${ctx}/hm/addProductList.html", "fnServerParams": function (aoData) { aoData.push( {"name": "addhmpId", "value": $("#productId").val()}, {"name":"addhmpName","value": $("#product").val()}, {"name":"HMP_CateId_1","value": $("#cateSelect").val()}, {"name":"HMP_CateId_2","value": $("#HMP_CateId_2").val()}, {"name":"HMP_CateId_3","value": $("#HMP_CateId").val()}, {"name":"HMP_PP","value": $("#brandSelect").val()}, {"name":"cateId","value": $("#cateId").val()} ); }, "aoColumns": [ { "sTitle": "选择<input type='checkbox' id='allcheckbox' />", "mData": "HMP_Id", "bSortable": false, "bVisible": true, "mRender": function(sVal,type,oObj){ return "<input type='checkbox' class='checkboxonly' value='"+sVal+"'/>"; } },这里着重强调下 :
这个方法里面 有自动分页功能 ,也就是说如果你后端获取的数据是分页的数据,那页面端 这里会自动与你的sql所匹配,不需要再做其他的设置 调整
"bPaginate": true,//翻页功能
而且,翻页功能是可以控制的 ,
"sAjaxSource": "${ctx}/hm/addProductList.html",
这是异步请求的路径 ,携带参数的话便是:
"fnServerParams": function (aoData) {
后面跟的参数 ,获取的时候用jquer即可
"aoColumns": [] 这个是每行的操作 单元格
sTile : 是单元格 名称(可以为汉字 或者 按钮)mData : 为sql中字段的名称(或者另外其的别名)"mRender": function(sVal,type,oObj){ return "<input type='checkbox' class='checkboxonly' value='"+sVal+"'/>"; }上面的内容,则是 控制页面端显示什么内容 ,经常用作状态 ,操作按钮,需要判断的显示问题(返回经常返回的是 字符串或者其他格式)$('#provider_table_products').dataTable({这个根据table 标签的 ID 来定义:<table class="table table-striped table-bordered table-hover dataTable" aria-describedby="sample-table-2_info" id="provider_table_products"> </table>而,后端获取到数据后,要以json的格式 传到前端,用来页面展示jsonObject.put("aaData", query.getRecords()); System.out.println(query.getRowCount()+"这个是显示多少条信息"); jsonObject.put("iTotalRecords", query.getRowCount()); jsonObject.put("iTotalDisplayRecords", query.getRowCount());PageView query = new PageView();PageView类 其实就是 分页类,类中定义的就是一般分页所需要的数据:例如:起始 ,每页显示多少条数据等query.getRecords()后端获取到的数据集合jsonObject.put("iTotalRecords", query.getRowCount());
则是sql查询出来的数据总共多少条记录 ,这个如果不清晰,页面显示的时候也是不完整的 ,多数分页问题是这里存在问题!