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

您所在的位置：网站首页 › datatable分页刷新表头 › jquery datatables X轴滚动、scrollX设置水平滚动无效、cannot reinitialise datatable、带参数获取数据、刷新数据

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

2023-10-17 08:11| 来源: 网络整理| 查看: 265

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; }，规定段落中的文本不进行换行，使文字内容在一行里。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。 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）

【本文地址】

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

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

今日新闻

推荐新闻