angular-datatables学习与实践总结4

这篇文章记录一些datatables常用的回调函数

rowCallback：表格行绘制的回调函数

rowCallback: (row, data, index) => {}

参数row表示这一行的dom，data表示这一行的全部数据，index表示这一行的内部索引。另外还有一个相似的回调函数createdRow，参数也是一样的，官网上说createdRow的效率高于rowCallback，实践中也没有比较过，不过createdRow会先于rowCallback触发。

initComplete：表格初始化结束后的回调函数。有两个参数，一个是setting，datatables的设置对象；一个是json，如果使用ajax选项来获取数据，则得到服务器返回的数据，否则是 undefined

一般常用的回调函数就这几个，很少，还有很多跟保存表格状态有关的回调函数，大家可以直接去datatables官网查询，虽然是jquery版本的，但是原理都是一样的。

在angular中还有一点是需要注意的，那就是angular对于dom只渲染一次，如果之后改变了dom的结构，比如添加了新的click事件，那么angular将不会作出反应，例如在columns.render中设置：

render: (data, type, row, meta) => {
    return '<div><button (click)="test()">通过</button>'
}

这样即使在组件中定义了test这个函数，点击按钮也不会触发。在angularjs中可以使用$compile服务来对dom重新编译以解决这个问题，但是在angular5中我没有找到类似的用法，好像并不提倡这种写法。目前我是使用rowCallback+jquery的方法来解决这个问题。例如：

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 '未通过审核'
            }

          }

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('失败', '拒绝通过审核失败');
                }
              })
            })
         }
    })
)

代码里面的dtElement是通过

@ViewChild(DataTableDirective) dtElement: DataTableDirective;

得到的，通过

self.dtElement.dtInstance.then((dtInstance: DataTables.Api)=>{})

就可以获得datatables的实例。

下面再记录一下ajax这个属性：

ajax用于异步获取数据填充到表格中。数据源可以是两种类型：对象数组和纯数组。当你使用对象数组作为数据源时，你需要使用 columns.data来匹对对象的属性，例如：

{
    "data": [
        { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" },
        // row 2 data source,

        // etc

    ]
}     

那么就需要做如下设置：

"columns": [
        {"data": "name"},
        {"data": "position"},
        {"data": "salary"},
        {"data": "start_date"},
        {"data": "office"},
        {"data": "extn"}
    ]

如果使用的是纯数组则不需要使用，DataTables 会默认按照数组的顺序显示每一个行数据。还有一点需要注意的是，datatables默认接受一个属性为data的数据，如果你返回的数据不是这样，你需要使用 ajax.dataSrc来处理，我们稍后再来说这个属性。

ajax接受3种类型的参数：

• string - 设置获取数据的url
• object - 和 jQuery.ajax 定义类似
• function- 自定义获取数据的功能

当参数是object时，记录一下与jquery.ajax不一样的地方。

在datatables中，ajax.data可以是object，也可以是function。当为object时与jquery.ajax一样，当为function时，函数有一个参数data，官网对这个参数的解释为：Datatables构造的请求参数，如果开启了服务器模式( serverSide:true) 这个还会包含服务器请求的一些参数，具体到底是什么目前我也不是很清楚，以后搞清楚了会第一时间更新。当函数没有返回值时，这个data参数就会作为request发送的数据；如果返回一个对象，那么这个对象就会作为request发送的数据；如果返回一个字符串，一般是用JSON.stringify()来获取，服务端可以直接解译。

datatables的ajax有一个新的属性叫dataSrc，它可以改变从服务器端返回的数据给datatables，或者是操作数据从一种形式转换成另一种形式，添加这个参数的目的是因为success函数在datatables的ajax中是不能重写的，它是自动调用的。dataSrc可以是string也可以是function。

当为string时，之前我们说过，datatables默认接受的是一个属性为data的数据（对象数组或者纯数组），dataSrc就可以改变这个属性名字，例如设置"dataSrc": "tableData"，那么datatables就会去寻找属性为"tableData"的数据，如果设置"dataSrc": ""，datatables就会从数组里获取数据（比如： { [ ...data... ] } ）。

当为function时，dataSrc 可以操作从服务器返回的数据转化成另一种。 例如， 如果数据被分隔在多个数组里面，你需要合并到一个数组返回给Datatables处理后显示非json格式的数据，可以通过 dataSrc来转换成javascript数组交给Datatables显示 ，接受一个data参数，返回一个datatables使用的数据数组。

ajax还可以接受一个function参数，function ajax( data, callback, settings )。作为一个函数，这个可以完全自己控制Ajax请求，请求参数，返回的数据都可以不受 DataTables 的影响。事实上你可以使用非Ajax请求，而直接使用本地储存。你可以直接从本地数据库获取数据交给 callback 去处理。参数data是发送给服务器的数据，callback是回调函数，必须被执行，DataTables才能获取到数据，且将返回的数据作为callback()的唯一参数。例如：

"ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }