web端 jquery $().dateTable({});

刚开始接触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查询出来的数据总共多少条记录 ，这个如果不清晰，页面显示的时候也是不完整的 ，多数分页问题是这里存在问题！