问题描述
我有一个项目，用户需要能够选择随附的脚本是否激活 jQuery DataTables 的响应式扩展。
我想在 HTML 中添加一个下拉菜单，让用户选择是否在dataTable()初始化选项中将选项responsive设置为true或false 。
我尝试添加一个单独的函数来选择值，并使用全局变量将其传递给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选项？
1楼
解决方案
您需要销毁表以重新初始化它并启用/禁用扩展。
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 。
演示
有关代码和演示，请参阅 。
2楼
假设它是DataTable 插件，那么您可以更改 myFunction 中的响应设置。 第一的，
var table = $('#example').DataTable(/* your current settings */);
然后，在 myFunction 中，
new $.fn.dataTable.Responsive( table, {
details: true
} );
3楼
您是否尝试过使用 onChange 事件处理程序在下拉选择发生更改时获取值？ 我认为使用 onChange 来切换变量值并将其分配给任何有效的 dataTable 键。 像这样：
$(document).ready(function(){
var selected;
$('#selected2').onChange( function() {
selected = $(this).val();
}
$("#example").dataTable({
"responsive": false,
"processing": selected,
"serverSide": true,
"ajax": "scripts/university.php",
"columns": [
// ID
null, ........
4楼
摆脱烦人的 javascript 或使用它( onchange="myFunction()")
$(document).ready(function(){
var selectedValue;
$('#selected2').change( function() {
selectedValue = $(this).val();
alert(selectedValue);
});
});