我有一个项目,用户需要能够选择随附的脚本是否激活 jQuery DataTables 的响应扩展。
我想在 HTML 中添加一个下拉菜单,让用户选择在 中将选项
初始化选项。 responsive
设置为 true
还是 false
dataTable()
我试图添加一个单独的函数来选择值,并使用全局变量将其传递给 dataTable()
函数,但无法使其正常工作。
JavaScript:
$(document).ready(function(){
$("#example").dataTable({
"responsive": false,
"processing": false,
"serverSide": true,
"ajax": "scripts/university.php",
"columns": [
// ID
null, ........
*HTML**
<select id="selected2" onchange="myFunction()">
<option value="true">true</option>
<option value="false">false</option>
</select>
我尝试在 dataTable 函数中添加一个 document.getElementById
子句作为第一行,但无法使其工作。
我可以向现有功能添加什么以使用户可以从 HTML 页面上的列表中选择 responsive
选项?
最佳答案
解决方案
您需要销毁表以重新初始化它并启用/禁用 Responsive扩展名。
var dtOptions = {
responsive: true
};
var table = $('#example').DataTable(dtOptions);
$('#ctrl-select').on('change', function(){
dtOptions.responsive = ($(this).val() === "1") ? true : false;
$('#example').DataTable().destroy();
$('#example').removeClass('dtr-inline collapsed');
table = $('#example').DataTable(dtOptions);
});
注意事项
当表格被销毁时,响应式扩展会留下一些类(dtr-inline
、collapsed
),所以我在再次初始化表格之前手动删除它们。
此外,我建议将所有选项放在一个单独的对象 dtOptions
中,以便更轻松地重新初始化,这样您只需切换一个选项 responsive
。
演示
参见 this jsFiddle用于代码和演示。
关于javascript - 如何动态启用/禁用响应式扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31486247/