dataTable学习心得
1.引用文件
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
2.数据类型
数组
vardata = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ], [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] ]
对象
[ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "name": "Garrett Winters", "position": "Director", "salary": "$5,300", "start_date": "2011/07/25", "office": "Edinburgh", "extn": "8422" } ]
简单实例
functionEmployee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office;
this.office = function() {
returnthis._office;
}
};
$('#example').DataTable( {
data: [
newEmployee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),
newEmployee( "Garrett Winters", "Director", "$5,300", "Edinburgh")
],
columns: [
{ data: 'name'},
{ data: 'salary'},
{ data: 'office'},
{ data: 'position'}
]
} );
配置参数
$(function () { $("#table1").DataTable({ // 是否允许检索 "searching": false, // 是否允许排序 "ordering": true, // 初期排序列 //"order": [[0,'asc'],[1,'desc']], // 是否显示情报 就是"当前显示1/100记录"这个信息 "info": false, // 是否允许翻页,设成false,翻页按钮不显示 "paging": false, // 水平滚动条 "scrollX": false, // 垂直滚动条 "scrollY": false, // 件数选择功能 默认true "lengthChange": false, // 件数选择下拉框内容 "lengthMenu": [10, 25, 50, 75, 100], // 每页的初期件数 用户可以操作lengthMenu上的值覆盖 "pageLength": 50, //翻页按钮样式 // numbers:数字 // simple:前一页,后一页 // simple_numbers:前一页,后一页,数字 // full:第一页,前一页,后一页,最后页 //full_numbers:第一页,前一页,后一页,最后页,数字 //first_last_numbers:第一页,最后页,数字 "pagingType": "full_numbers", // 行样式应用 指定多个的话,第一行tr的class为strip1,第二行为strip2,第三行为strip3. // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状,这里的class必须指定为2个。 "stripeClasses": ['strip1', 'strip2', 'strip3'], // 自动列宽 "autoWidth": true, // 是否表示 "processing" 加载中的信息,这个信息可以修改 "processing": true, // 每次创建是否销毁以前的DataTable,默认false "destroy": false, // 控制表格各种信息的表示位置(比较复杂) 默认:lfrtip // 具体参考:https://datatables.net/reference/option/dom "dom": 'lrtip', "language": { "processing": "DataTables is currently busy", // 当前页显示多少条 "lengthMenu": "Display _MENU_ records", // _START_(当前页的第一条的序号) ,_END_(当前页的最后一条的序号),_TOTAL_(筛选后的总件数), // _MAX_(总件数),_PAGE_(当前页号),_PAGES_(总页数) "info": "Showing page _PAGE_ of _PAGES_", // 没有数据的显示(可选),如果没指定,会用zeroRecords的内容 "emptyTable": "No data available in table", // 筛选后,没有数据的表示信息,注意emptyTable优先级更高 "zeroRecords": "No records to display", // 千分位的符号,只对显示有效,默认就是"," 一般不要改写 //"thousands": "'", // 小数点位的符号,对输入解析有影响,默认就是"." 一般不要改写 //"decimal": "-", // 翻页按钮文字控制 "paginate": { "first": "First page", "last": "Last page", "next": "Next page", "previous": "Previous page" }, // Client-Side用,Server-Side不用这个属性 "loadingRecords": "Please wait - loading..." }, // 默认是false // 如果设为true,将只渲染当前也的html,速度会很快,但是通过API就访问不到所有页的数据,有利有弊 //"deferRender": false, // 服务器端处理方式 "serverSide": true, // ajax选项 可以直接简单指定成请求的文件 //"ajax": "data.json", // 也可以用对象来配置,更加灵活 "ajax": { // url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action url: "data.json", type: 'POST', // 传给服务器的数据,可以添加我们自己的查询参数 data: function (param) { param.opportunityNO = $('#txtSearch').val(); return param; }, //用于处理服务器端返回的数据。 dataSrc是DataTable特有的 dataSrc: function (myJson) { if (myJson.timeout) { return ""; } return myJson; } }, //指定用于行ID的属性名 默认是:DT_RowId "rowId": 'staffId', // 列定义 "columns": [ { // data 可以是属性名,或嵌套属性(WORKTM1.ID),数组ArrOne[,] 用中括号中的字符连接数组后返回。 "data": "WORKTM1", // 这里的class会应用到td上面 "className": "dt-body-right", // 列宽 "width": 40, // 很灵活,描绘每个单元格 // data:当前cell的data,这个data和type有关 // type:filter,display,type,sort // row:当前行数据 // https://datatables.net/reference/option/columns.render "render": function (data, type, row, meta) { return type === 'display' && data.length > 40 ? '<span title="' + data + '">' + data.substr(0, 38) + '...</span>' : data; }, // 是否可排序 默认值:true "orderable": true, // 指定当前列排序操作的时候,用哪一列(几列)的数据进行真正的排序(通常是隐藏的) "orderData": [0, 1], // 这个属性 和type属性相似,指定排序时候这一列该怎么转换数据, //需要用到其他的插件 详细: https://datatables.net/plug-ins/sorting/ "orderDataType": "dom-text", // 是否显示当前列 默认值:true "visible": false, // 是否允许搜索此列 默认值:true "searchable": false, //这个属性仅Client-Side有效, Server-Side在服务器端排序 //主要用于排序和筛选,指定当前列作为什么类型进行解析 //内置值:date,num,num-fmt,html-num,html-num-fmt,html,string // 还可以用其他插件提供的类型 :详细: https://datatables.net/plug-ins/sorting/ // 有html开头的,都会讲html标签先移除后进行数据处理 "type": "html", // 列头文字,如果没有指定thead,则会生成。如何指定了thead,则会覆盖当前列头文字 "title": "My column title", // defaultContent:默认值,属性值为null或undefined就会用这个值 "defaultContent": "<i>Not set</i>", // 单元格类型:"th","td" "cellType" : "td", // 单元格创建完后的回调,可以作为render的补充 // cell:TD的dom // cellData:原始的单元格数据,如何render中进行了格式化,用$(cell).html()来取格式化后的数据 // rowData:行数据 // row:行号 // col:列号 "createdCell": function (cell, cellData, rowData, row, col) { if ( cellData < 1 ) { $(td).css('color', 'red') } } }, { "data": "WORKTM2", "className": "dt-body-right", "width": 40 }, { "data": "WORKTM3", "className": "dt-body-right", "width": 40 }, { "data": "WORKTM4", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY1", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY2", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY3", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY4", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY5", "className": "dt-body-right", "width": 40 } ], // 和上面的columns类似,columns可以定义的属性,都可以在这里定义, // 另外增加targets属性用于指定列范围(可以多列) // 优先级:上面的columns高于columnDefs columnDefs: [ { targets: [0, 2], render: function (data, type, row, meta) { if (type === 'display') { var ctemp = $(".dayinfo").children().eq(meta.col).attr("class"); var cname = ctemp ? ctemp : ""; var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" ? "readonly" : ""; return '<input type="input" class="form-control dt-body-center ' + cname + '" ' + readonly + ' value="' + data + '">'; } return data; }, }], // 每一行创建完调用的函数 "createdRow": function (row, data, dataIndex) { // row : tr dom // data: row data // dataIndex:row data's index if (data[4] == "A") { $(row).addClass('important'); } }, // 每一行被创建,但还没有被加载到document中,这个函数优先于createdRow // 个人觉得用createdRow更好 "rowCallback": function (row, data, index) { // row : tr dom // data: row data // index:row data's index if ( data[4] == "A" ) { $('td:eq(4)', row).html( '<b>A</b>' ); } }, //thead被描画后调用 "headerCallback": function (thead, data, start, end, display) { //thead:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序) // start end :当前dispaly数据的开始结束序号 $(thead).find('th').eq(0).html( 'Displaying '+(end-start)+' records' ); }, // tfoot被描画后调用,通常可用于计算合计值 "footerCallback": function (tfoot, data, start, end, display) { //tfoot:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序) // start end :当前dispaly数据的开始结束序号 var api = this.api(); $( api.column( 5 ).footer() ).html( api.column( 5 ).data().reduce( function ( a, b ) { return a + b; }, 0 ) ); }, // 初始化,描画都已经完成,常用于ajax "initComplete": function( settings, json ) { $('div.loading').remove(); }, // 每次DataTable描画后都要调用,调用这个函数时,table可能没有描画完成, // 所以不要在里面操作table的dom,要操作dom应放在initComplete "drawCallback": function( settings ) { var api = this.api(); // Output the data for the visible rows to the browser's console console.log( api.rows( {page:'current'} ).data() ); }, // 这个函数可以改写数字的格式化方式 // 默认DataTable用 language.thousands来解析数字,“,” "formatNumber": function ( toFormat ) { return toFormat.toString().replace( /\B(?=(\d{3})+(?!\d))/g, "'" ); } }); });
自己写的实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"/> </head> <body> <table id="example" class="display" width="100%" style="text-align: center;"> <thead> <tr> <th>发布时间</th> <th>通知名称</th> <th>发布机构</th> <th>发布机构</th> <th>发布机构</th> <th>发布机构</th> </tr> </thead> <tbody> </tbody> </table> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //数据类型:数组 var dataSet = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ] ]; //数据类型:对象 var dataSet1 = [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "name": "Garrett Winters", "position": "Director", "salary": "$5,300", "start_date": "2011/07/25", "office": "Edinburgh", "extn": "8422" } ] $(document).ready(function() { $('#example').DataTable( { data: dataSet1, // 是否允许检索 "searching": false, // 件数选择下拉框内容 "lengthMenu": [10, 25, 50, 75, 100], // 件数选择功能 默认true "lengthChange": false, // 是否允许排序 "ordering": true, // 是否显示情报 就是"当前显示1/100记录"这个信息 "info": false, //翻页按钮样式 // numbers:数字 // simple:前一页,后一页 // simple_numbers:前一页,后一页,数字 // full:第一页,前一页,后一页,最后页 //full_numbers:第一页,前一页,后一页,最后页,数字 //first_last_numbers:第一页,最后页,数字 "pagingType": "full_numbers", // 翻页按钮文字控制 "language" : { // 国际化配置 "paginate": { "first": "第一页", "last": "最后一页", "next": "下一页", "previous": "上一页" } }, //数据类型是对象 获取数据 columns: [ { data: "name" }, { data: "position" }, { data: "salary" }, { data: "start_date." }, { data: "office" }, { data: "extn" } ] } ); } ); </script> </html>