dataTables 插件学习整理
Posted Sabo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dataTables 插件学习整理相关的知识，希望对你有一定的参考价值。
在项目中使用了dataTables 插件，学习整理一下。
dataTables 的官方中文网站 http://www.datatables.club
引入文件：
所有的都要引入 jq文件
1. dataTables 的样式
<link rel="stylesheet" href="jquery.dataTables.css">
<script src="jquery.dataTable.js">
2. bootstrap 风格的dataTables
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="dataTables.bootstrap.css">
<script src="bootstrap.js">
<script src="jquery.dataTable.js">
<script src="dataTable.bootstrap.js">
html 代码
1 <table id="example" width="100%" class="table table-striped table-bordered"> 2 <thead> 3 <tr> 4 <th>编码</th> 5 <th>职位</th> 6 <th>姓名</th> 7 <th>状态</th> 8 <th>项目</th> 9 <th>机构</th> 10 <th>操作</th> 11 </tr> 12 </thead> 13 </table>
JS 代码基本配置
1 var lang = { 2 "sProcessing": "处理中...", 3 "sLengthMenu": "每页 _MENU_ 项", 4 "sZeroRecords": "没有匹配结果", 5 "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。", 6 "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项", 7 "sInfoFiltered": "(由 _MAX_ 项结果过滤)", 8 "sInfoPostFix": "", 9 // "sSearch": "本地搜索：", 10 "sUrl": "", 11 "sEmptyTable": "暂无数据", 12 "sLoadingRecords": "载入中...", 13 "sInfoThousands": ",", 14 "oPaginate": { 15 "sFirst": "首页", 16 "sPrevious": "上页", 17 "sNext": "下页", 18 "sLast": "末页", 19 "sJump": "跳转" 20 }, 21 "oAria": { 22 "sSortAscending": ": 以升序排列此列", 23 "sSortDescending": ": 以降序排列此列" 24 } 25 }; 26 27 $(‘#example‘).DataTable({ 28 "processing" : true, //DataTables载入数据时，是否显示进度条 29 "serverSide": true, // 开启服务端模式 30 "language": lang, //提示信息 31 "autoWidth": false, //自适应宽度， 32 "sScrollY" : 450, //DataTables的高 33 "sScrollX" : 820, //DataTables的宽 34 "columnDefs": [ 35 {"targets": 0, "width": "10%"}, // 设置第一列的宽度 36 {"targets": 1, "width": "10%"}, 37 {"targets": 2, "width": "10%"}, 38 {"targets": 3, "width": "10%"}, 39 {"targets": 4, "width": "20%"}, 40 {"targets": 5, "width": "20%"}, 41 {"targets": 6, "width": "20%"} 42 ], 43 "lengthMenu": [10, 20, 30], // 显示每页显示的条数 44 "stripeClasses": ["odd", "even"], // 为奇偶行添加样式 45 "searching": true, // 是否允许开启本地检索功能 46 "bFilter": false, // 去掉 搜索框 47 "paging": true, // 是否开启本地分页 48 "lengthChange": true, //是否允许产品改变表格每页显示的记录数 49 "info": true, // 控制是否显示表格左下角的信息 50 "bSort": false, // 禁止排序 51 "deferRender": true, // 延迟渲染 52 "pageLength": 10, // 每页显示的条数 53 //跟数组下标一样，第一列从0开始，这里表格初始化时， 54 "order": [2, ‘asc‘], //asc升序 desc降序 // 下标为2，第三列 生序排列 55 "aoColumnDefs": [{ 56 "orderable": false,// 指定列不参与排序 57 "aTargets": [1,3,4,5,6] // 指定 下标为[1,3,4,5,6]的不排序 58 }], 59 "initComplete": function () { // 给每列添加下拉搜索 60 var api = this.api(); 61 api.columns().indexes().flatten().each(function (i) { 62 if (i != 0 && i != 2 && i != 6) { // 第1，3，7不添加，其余的添加 63 var column = api.column(i); 64 var select = $(‘<select><option value=""></option></select>‘) 65 .appendTo($(column.header())) // 显示在table中最上面在thead里面 66 .on(‘change‘, function () { 67 var val = $.fn.dataTable.util.escapeRegex( 68 $(this).val() 69 ); 70 column 71 .search(val ? val : ‘‘, true, false) 72 .draw(); 73 }); 74 75 column.data().unique().sort().each(function (d, j) { 76 var text = $(d).html(); // 获取 span 里面的 text 77 var val = $(d).attr("value"); // 获取span 里面的自定义属性 value 78 if(text != null && text.trim() != "" && val != null && text.trim() != ""){ 79 select.append(‘<option value="‘ + val + ‘">‘ + text + ‘</option>‘) 80 } 81 82 }); 83 } 84 85 }); 86 }, 87 "ajax": { // ajax 请求数据 88 "url": "请求路径", 89 "type": "get" 90 }, 91 "columns":[ 92 {data: name}(后台返回的字段名), // 有几列就解析几次 93 data: tell(后台返回的字段名), 94 ... 95 // 还可以写 96 //{ 97 // "data": function (e) { 98 // return e.name; 99 // } 100 // }, 101 102 ] 103 104 105 });
给每一列添加下拉搜索的方法 （2）官方
首先在html中添加
1 <tfoot> 2 <tr> 3 <th></th> 4 <th></th> 5 <th></th> 6 <th></th> 7 <th></th> 8 <th></th> 9 </tr> 10 </tfoot>
js代码
1 initComplete: function () { 2 var api = this.api(); 3 api.columns().indexes().flatten().each( function ( i ) { 4 var column = api.column( i ); 5 var select = $(‘<select><option value=""></option></select>‘) 6 .appendTo( $(column.footer()).empty() ) // 给tfoot里面添加select 7 .on( ‘change‘, function () { 8 var val = $.fn.dataTable.util.escapeRegex( 9 $(this).val() 10 ); 11 column 12 .search( val ? ‘^‘+val+‘$‘ : ‘‘, true, false ) 13 .draw(); 14 } ); 15 column.data().unique().sort().each( function ( d, j ) { 16 select.append( ‘<option value="‘+d+‘">‘+d+‘</option>‘ ) 17 } ); 18 } ); 19 }
给每列添加自定义属性
1 // 在 "columns" 下面添加 2 createdRow: function (row, data, index) { 3 // 给每列添加 自定义属性 name 4 $(row).attr(‘name‘,data.name); 5 }
给每列添加点击事件
$(‘#example tbody‘).on( ‘click‘, ‘tr‘, function () { }) ;
自定义的分页 ，只给后台传指定的参数
length // 页面显示的条数，每页显示多少条、
start // 开始的记录序号
draw // 当前页面
1 "ajax": function (data, callback, settings) { 2 //封装请求参数 3 var param = {}; 4 param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候 5 param.start = data.start;//开始的记录序号 6 param.draw = data.draw;//当前页码 7 8 //ajax请求数据 9 $.ajax({ 10 type: "get", 11 url: "请求路径", 12 cache: false, //禁用缓存 13 data: param, 14 dataType: "json", 15 success: function (result) { 16 //封装返回数据 17 var returnData = {}; 18 returnData.draw = result.data.draw;//这里直接自行返回了draw计数器,应该由后台返回 19 returnData.recordsTotal = result.data.recordsTotal;//返回数据全部记录 20 returnData.recordsFiltered = result.data.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果 21 returnData.data = result.data.data;//返回的数据列表 22 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染 23 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕 24 callback(returnData); 25 } 26 }); 27 },
以上是关于dataTables 插件学习整理的主要内容，如果未能解决你的问题，请参考以下文章