jquery datatables X轴滚动、scrollX设置水平滚动无效、cannot reinitialise datatable、带参数获取数据、刷新数据

目录

1、 datatables X轴滚动、scrollX设置水平滚动无效

2、给datatables设置高度

3、cannot reinitialise datatable

4、datatables获取数据时，前台向后台传递参数

5、datatables排序、datatables部分列排序

6、DataTable刷新

---

---

1、 datatables X轴滚动、scrollX设置水平滚动无效

1、dataTables开启水平滚动条

$('#example').dataTable( {
     "scrollX": true,
     "autoWidth":true
} );

2、发现不起作用

加上css样式 th, td { white-space: nowrap; }，规定段落中的文本不进行换行，使文字内容在一行里。文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

<table id="mytable" class="table table-striped table-bordered" style="white-space: nowrap; ">

2、给datatables设置高度

3、设置表格的高度，

默认情况下表格的高度是随着内部条目数的变化而变化的（即所有数据都能显示出来），可以通过 scrollY 配置属性设置个固定高度，这样当表格内容超出显示范围时会自动出现滚动条。

{
    'scrollY': "170px",
    'scrollY': "calc(100vh - 100px)",  //表格内容部分高度设置为窗口高度-100px
}

"scrollY": "calc(100vh - 350px)"

3、cannot reinitialise datatable

原因：datatables不允许多次初始化某一表格 

解决方法：

在初始化时设置destroy:true。或者初始化时手工销毁

if (myDataTable) {
    myDataTable.destroy();
}

4、datatables获取数据时，前台向后台传递参数

1、第一种方法： ajax.data可以直接赋值一个对象

$('#example').dataTable( {
    "ajax": {
      "url": "data.json",
      "data": {"user_id": 451}
  }
} );

2、第二种办法：传入一个方法

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

5、datatables排序、datatables部分列排序

1、整体禁止排序

$('#example').dataTable( {
  "ordering": false
} );

2、部分列排序，在columns option中定义

$('#example').DataTable( {
    "columns": [
        { "orderable": false },
        null,
        null,
        null,
        null
      ]
} );

'columns': [
	{'data': 'name', 'orderable': false},
	{'data': 'orgOrder', 'orderable': true},
	{'data': 'lng', 'orderable': false},
	{'data': 'lat', 'orderable': false},
	{'data': 'mapLevel', 'orderable': false},
	{'data': 'imgUrl', 'orderable': false}
]

3、在columnDefs option中定义

$('#example').DataTable( {
   "columnDefs": [
       { "orderable": false, "targets": 0 }
     ]
} );

4、通过order option来定义

$('#example').dataTable( {
    "order": [[ 0, 'asc' ], [ 1, 'asc' ]]
} );

上述4种方法都可以

6、DataTable刷新

在做一些操作后，需要DataTables刷新数据，

myDataTable.ajax.reload(null, false);// 刷新表格数据，分页信息不会重置

functionajax.reload( callback, resetPaging )，

callback：当服务器返回数据并重绘完毕时执行此回调方法，回调方法返回的是服务器返回的数据。

resetPaging：重置（默认或者设置为true）或者保持分页信息（设置为false）