这篇文章记录一下datatables的一些主要设置
this . dtOptions = { columns: [ { title: '用户名' , data: 'name' , width: '10%' }, { title: '行政区名称' , data: 'xzqmc' , width: '10%' }, { title: '行政区代码' , data: 'xzqdm' , width: '10%' }, { title: '单位' , data: 'company' , width: '30%' , render : ( data , type , row , meta ) => { //如果单位名称过长则用省略号隐藏 if ( type === 'display' ) { if ( data && data . length > 8 ) { return data . substr ( 0 , 10 ) + '<a href="javascript:void(0)">...</a>' ; } else { return data ; } } return data ; } }, { title: '电话号码' , data: 'phone' , width: '10%' }, { title: '邮箱地址' , data: 'email' , width: '10%' }, { title: '审核' , data: 'state' , width: '20%' , type: 'html' , className: 'auditTd' , render : ( data , type , row , meta ) => { if ( row . state == 0 ) { return '<div>' + '<button class="agreeBtn btn btn-sm btn-raised btn-blue">通过</button>' + '<button class="refuseBtn btn btn-sm btn-raised btn-red">拒绝</button>' + '</div>' ; } else { return '未通过审核' } } } ], columnDefs: [ { targets: [ - 1 ], orderable: true , orderSequence: [ "asc" , "desc" ], searchable: false }, { targets: '_all' , orderable: false , searchable: true } ], ajax : ( data , callback ) => { this . systemService . getAllUnauditUser (). subscribe ( userArr => { callback ( userArr ); }) }, pagingType: 'full_numbers' , pageLength: 5 , scrollX: true , scrollCollapse: true , order: [[ 6 , 'desc' ]], lengthMenu: [[ 5 , 10 , - 1 ], [ 5 , 10 , "All" ]], processing: true , rowCallback : ( row , data , index ) => { //每一行创建完成之后的回调函数 let self = this ; self . dtElement . dtInstance . then (( dtInstance : DataTables . Api ) => { //用于获取datatable的实例 //对审核通过和拒绝button绑定相应的事件 if ( $ ( '.agreeBtn' , row ). length > 0 ) { $ ( '.agreeBtn' , row ). unbind ( 'click' ); $ ( '.agreeBtn' , row ). bind ( 'click' , () => { self . systemService . updateUserState ( data . id , 1 ). subscribe ( result => { if ( result ) { alertFunctions . basicSuccess ( '成功' , '用户' + data . name + '审核通过' ); dtInstance . row ( row ). remove (); dtInstance . draw (); self . ifAudited = true ; } else { alertFunctions . basicError ( '失败' , '用户' + data . name + '审核失败' ); } }) }) $ ( '.refuseBtn' , row ). unbind ( 'click' ); $ ( '.refuseBtn' , row ). bind ( 'click' , () => { self . systemService . updateUserState ( data . id , - 1 ). subscribe ( result => { if ( result ) { $ ( '.auditTd' , row ). html ( '未通过审核' ); data . state = - 1 ; dtInstance . draw () } else { alertFunctions . basicError ( '失败' , '拒绝通过审核失败' ); } }) }) } //如果单位名称过长则绑定展开和收回事件 let $a = $ ( 'a' , row ); if ( $a . length > 0 ) { $a . unbind ( 'click' ); $a . bind ( 'click' , () => { if ( $a . html () == '...' ) { $a . parent ( 'td' ). html ( data . company + '<a href="javascript:void(0)"><small>收回</small></a>' ); } else { $a . parent ( 'td' ). html ( data . company . substr ( 0 , 10 ) + '<a href="javascript:void(0)">...</a>' ); } dtInstance . draw () }) } }) }, createdRow : ( row , data , dataIndex ) => { }, preDrawCallback : ( settings ) => { }, language: { emptyTable: "表中数据为空" , info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项" , infoEmpty: "显示第 0 至 0 项结果，共 0 项" , infoFiltered: "(由 _MAX_ 项结果过滤)" , infoPostFix: "" , thousands: "," , lengthMenu: "显示 _MENU_ 项结果" , loadingRecords: "载入中..." , processing: "处理中..." , search: "搜索:" , searchPlaceholder: "" , zeroRecords: "没有匹配结果" , paginate: { first: "首页" , last: "末页" , next: "下页" , previous: "上页" } } }先看一下一些基本的设置：
pagingType：string 表示分页按钮布局，有6种内置的布局
numbers 只显示数字 （1.10.8版本）simple 只有上一页和下一页两个按钮simple_numbers 上一页和下一页两个按钮，加上页数按钮（默认值）full 首页，尾页，上一页和下一页四个按钮full_numbers 首页，尾页，上一页和下一页四个按钮,加上数字按钮first_last_numbers 首页，尾页两个按钮,加上数字按钮pagingLength：number 表示每页有多少行数据（默认10）
scrollX：boolean 设置水平滚动，默认false。scrollY同理
scrollCollapse：boolean 当显示更少的记录时，是否允许表格减少高度。默认false
order：array 表格初始排序（注意在datatables中列数是从0开始的，也就是说0表示第一列）。默认会对第一列进行排序，即使设置了第一列不排序（orderable:false），如何不设置这个属性，表格初始化后第一列仍然会显示排序箭头，为避免这个bug一般要对这一属性进行设置。
lengthMenu：array 更改页面显示条数的下拉框选项，它可以是：
整数值的一维数组，用于显示的选项和显示长度的值二维数组，第一个数组用来作为长度的值，第二个数组用来作为显示的选项。这是很有用的，比如当你想显示“所有”选项。分页长度值必须的大于0，当为-1的时候，代表告诉DataTablse禁用分页（比如，显示所有数据）processing：boolean 是否显示正在处理的状态。默认false
language：文字表示设置，具体意思见字面意思，这里就不多说了
比较常用的设置属性就介绍到这儿，后面的文章会介绍column、columnDefs等
