关于jQuery datatables的几个好用而冷门的知识点

最新推荐文章于 2021-08-26 16:35:28 发布

weixin_34096182

最新推荐文章于 2021-08-26 16:35:28 发布

阅读量237

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/cxgphper/blog/865904

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、datatable定义新的每页显示的行数选择下拉，直接设置如下属性：

aLengthMenu: [10, 30, 50, 100],

2、datatable点击表头排序后台接受的参数处理方式（官网上比较难查到，我这儿后台是php处理的）

$orderDatas = I('post.order');
$order = $this->getOrder($orderDatas);

/**
 * @use      [得到排序条件]
 * @User     chenxiaogang
 * @param $order
 * @return string
 */
private function getOrder($order){
    $str = '';
    foreach($order as $v) {
        switch($v['column']) {
            case '0':
                //默认
                $str = 'id asc';
                break;
            case '1':
                $str = 'id ' . $v['dir'] . ',';
                break;
            case '2':
                $str = 'createtime ' . $v['dir'] . ',';
        }
    }
    return rtrim($str, ',');
}

3、获取myDatatable.page.info()分页信息（如下，拷贝下面代码打开控制台看下你就明白了）

var myDatatable =
        $('#datatable').on('xhr.dt', function (e, settings, json, xhr) {
            //console.log(json);
            var info = myDatatable.page.info();
            console.log(info);
        }).DataTable()

4、如何查询或使用翻页操作带来的实时分页信息，代码如下：

//翻页操作如下：
myDatatable.on( 'page.dt', function () {
    var info = myDatatable.page.info();
    console.log(info);
} );

5、如何在表格加载完成后获取全部数据，可以在如下方法中可见：

$('#datatable').on('xhr.dt', function (e, settings, json, xhr) {
    console.log(json);
}).DataTable()

6、datatable刷新表格数据，分页信息不会重置【这点我知道曾经坑过很多人】

myDatatable.ajax.reload( null, false );

可用来代替 myDatatable.draw(true)【表格重绘】

7、datatable重载（第6点的扩充）（可修改datatable的参数）

var param = {'costid': checkerzi.val()};
minDatatable.settings()[0].ajax.data = param;
//minDatatable.settings()[0].ajax.url = '{:U("detail")}';
minDatatable.ajax.reload();

8、如何关闭某一列的排序，改一下colums里面字段参数属性：