jquery datatable学习

最新推荐文章于 2020-05-22 13:42:59 发布

「已注销」

最新推荐文章于 2020-05-22 13:42:59 发布

阅读量5.5k

点赞数 1

使用Ajax对后台进行请求,要求的数据结构以及说明：jquery datatable 1.10.4 分页数据格式

{
    "draw": 2,
    "recordsTotal": 11,
    "recordsFiltered": 11,
    "data": [
        {
            "id": 1,
            "firstName": "Troy",
            "lastName": "Young"
        },
        {
            "id": 2,
            "firstName": "Alice",
            "lastName": "LL"
        },
        {
            "id": 3,
            "firstName": "Larry",
            "lastName": "Bird"
        }
        // ......
    ]
}

参数解释：

draw:表示请求次数

recordsTotal:总记录数

recordsFiltered:过滤后的总记录数

data:具体的数据对象数组

jquery datatable 1.9.4数据格式

{  
    "iTotalRecords": 10,//本次加载记录数量  
    "iTotalDisplayRecords": 57,//总记录数量  
    "aaData": [  
        {  
            "id": "1",  
            "fromUser": "tom",  
            "toUser": "jack",  
            "content": "hello"  
        },  
        {  
  
            "id": "2",  
            "fromUser": "jack",  
            "toUser": "tom",  
            "content": "how are you"  
  
 }, ... ]}

jquery datatable 1.9.4使用

/* 
         * 调用搜索，搜索参数在fnServerParams中定义 
         */  
        $("#submitSearch").click( function () {  
            oTable.fnFilter();  
        } );  
          
        /* 
         * 初始化表格参数 
         */  
        var oTable = $('#messageList').dataTable( {  
            "bProcessing" : false, //DataTables载入数据时，是否显示‘进度’提示  
            "bServerSide" : true, //是否启动服务器端数据导入  
            //"aLengthMenu" : [10, 20, 50], //更改显示记录数选项  
            "iDisplayLength" : 10, //默认显示的记录数  
            "bPaginate" : true, //是否显示（应用）分页器  
            "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数  
            "bSort" : true, //是否启动各个字段的排序功能  
            "sDom": "t<'row-fluid'<'span6'i><'span6'p>>",//定义表格的显示方式  
            "sPaginationType": "bootstrap",  
            "aaSorting" : [[0, "desc"]], //默认的排序方式，第0列，降序排列  
            "bFilter" : true, //是否启动过滤、搜索功能  
                "aoColumns" : [{  
                    "mData" : "id", //列标识，和服务器返回数据中的属性名称对应  
                    "sTitle" : "",//列标题  
                    "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
                    "bVisible" : false //此列不显示  
                    //"sClass" : "hidden"//定义列的class参数，隐藏列也可以通过这种方式设置  
                }, {  
                    "mData" : "fromUser",  
                    "sTitle" : "发送人",  
                    "sWidth":"10%",//定义列宽度，以百分比表示  
                    "sDefaultContent" : "",  
                }, {  
                    "mData" : "toUser",  
                    "sTitle" : "接收人",  
                    "sDefaultContent" : "",  
                }, {  
                    "mData" : "messaeg_content",  
                    "sTitle" : "消息内容",  
                    "sDefaultContent" : "",  
                    "bSortable":false   //此列不需要排序  
                },  {  
                    "mData" : "",  
                    "sTitle" : "操作",  
                    "sDefaultContent" : "",  
                }],  
                "oLanguage": { //国际化配置  
                    "sProcessing" : "正在获取数据，请稍后...",    
                    "sLengthMenu" : "显示 _MENU_ 条",    
                    "sZeroRecords" : "没有您要搜索的内容",    
                    "sInfo" : "从 _START_ 到  _END_ 条记录 总显示记录数为 _TOTAL_ 条",    
                    "sInfoEmpty" : "记录数为0",    
                    "sInfoFiltered" : "(共显示 _MAX_ 条数据)",    
                    "sInfoPostFix" : "",    
                    "oPaginate": {    
                        "sFirst" : "第一页",    
                        "sPrevious" : "上一页",    
                        "sNext" : "下一页",    
                        "sLast" : "最后一页"    
                    }  
                },  
                /* 
                * 修改状态值  
                */  
                "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
                    if (aData.response_type == 'video')  
                        $('td:eq(1)', nRow).html('视频回复');  
                     
                      
                    return nRow;  
                },  
                /* 
                 * 向服务器传递的参数 
                 */  
                "fnServerParams": function ( aoData ) {  
                    aoData.push(   
                            { "name": "keyword", "value": $("#search-keyword").val() },   
                            { "name": "responseType", "value": $("#search-responseType").val() }  
                            );  
                  },  
                 //请求url  
                "sAjaxSource" : basePath+"getCustomResponsePageMessage/"+$("#secret").val(),  
                    //服务器端，数据回调处理  
                "fnServerData" : function(sSource, aDataSet, fnCallback) {  
                    $.ajax({  
                        "dataType" : 'json',  
                        "type" : "post",  
                        "url" : sSource,  
                        "data" : aDataSet,  
                        "success" : function(resp){  
                            fnCallback(resp);  
                        }  
                    });  
                }

jquery dataTable基本设置的中文注解

{
	  "sScrollX": "100%",   //表格的宽度 
	  "sScrollXInner": "110%",   //表格的内容宽度
	  "bScrollCollapse": true,  //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)  
	  "bPaginate": true,  //是否显示分页
	  "bLengthChange": true,  //是否开启分页记录数改变功能
	  "bFilter": true, //是否启用搜索栏
	  "bSort": true, //是否支持排序功能
	  "bInfo": true, //显示表格信息
	  "bAutoWidth": false,  //自适应宽度
	  "aaSorting": [[1, "asc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
	   //aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。 
        //对于每一个列对象： sTitle 定义列的标题 sClass 定义列的样式 
        //fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。 
        //当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。  
	   "aoColumns": [
	      {  "sTitle": "编号", "sClass": "center" },//定义列名
	      {
                 "sTitle": "操作",
                 "sClass": "center",
                 "fnRender": function (obj) {
                     return '<a href=\"Details/' + obj.aData[0] + '\">查看详情</a>  <input tag=\"' + obj.aData[0] + '\" type=\"checkbox\" name=\"name\" />';
                  }
               },//自定义列
	       { 
	          "bVisible": true, //不可见
	          "bSearchable": false, //参与搜索
	       },
	      null,
	      null
	   ], //列设置，表有几列，数组就有几项
	   "bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
	   "sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)
	   "oLanguage": {
	   "sLengthMenu": "每页显示 _MENU_ 条记录",
	   "sZeroRecords": "对不起，查询不到任何相关数据",
	   "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
	   "sInfoEmtpy": "找不到相关数据",
	   "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
	   "sProcessing": "正在加载中...",
	   "sSearch": "搜索",
	   "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
	   "oPaginate": {
	          "sFirst":    "第一页",
	          "sPrevious": " 上一页 ",
	          "sNext":     " 下一页 ",
	          "sLast":     " 最后一页 "
	      }
	   }, //多语言配置
           "ajax" : {
               "url" : "SplitServlet", // 请求地址
                "type" : "POST", // 请求方式
                "data" : function(d) {
                     //TODO 此处获取自定义参数，d中包含所有要传递到后台的参数
                     d.myKey = "myValue";
                     d.custom = $('#myInput').val();
                 }
           },
           "bJQueryUI": false, //可以添加 jqury的ui theme  需要添加css
	   "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]],  //设置每页显示记录的下拉菜单 
           "rowCallback" : function(row, data, displayIndex) {
                //TODO 行加载完毕的回调事件
                if (data[0] == 'Cedric Kelly') {
                  $(row).addClass('selected');
                }
            }
}

事件绑定：

var oTable = $("#tableID").dataTables();
$(oTable).bind( 'draw', functionName );

事件类型相见：http://datatables.net/docs/DataTables/1.9.4/

datable的数据格式，可以是数组，对象或者自定义格式，非常灵活

如果需要重新加载datatable中的数据则，调用datatable的draw()方法

var datatable = $('#example').DataTable();
datatable.draw();//执行此方法时，datable会向服务器,重新发送请求,并重画数据表格

分页连接，不用管，datable会自动组建好(检索参数以及每页显示记录数,从第几条记录开始等都会拼装好,后台只需要根据指定格式接受就可以)

参数格式如下：

columns[0][data]	`0`
columns[0][name]
columns[0][orderable]	`false`
columns[0][search][regex]	`false`
columns[0][search][value]
columns[0][searchable]	`false`
columns[1][data]	`1`
columns[1][name]
columns[1][orderable]	`true`
columns[1][search][regex]	`false`
columns[1][search][value]
columns[1][searchable]	`true`
columns[2][data]	`2`
columns[2][name]
columns[2][orderable]	`true`
columns[2][search][regex]	`false`
columns[2][search][value]
columns[2][searchable]	`true`
columns[3][data]	`3`
columns[3][name]
columns[3][orderable]	`true`
columns[3][search][regex]	`false`
columns[3][search][value]
columns[3][searchable]	`true`
columns[4][data]	`4`
columns[4][name]
columns[4][orderable]	`true`
columns[4][search][regex]	`false`
columns[4][search][value]
columns[4][searchable]	`true`
columns[5][data]	`5`
columns[5][name]
columns[5][orderable]	`true`
columns[5][search][regex]	`false`
columns[5][search][value]
columns[5][searchable]	`true`
custom	`wf`
draw	`2`
length	`10`
myKey	`myValue`
order[0][column]	`0`
order[0][dir]	`asc`
search[regex]	`false`
search[value]
start	`10`