Question

我确信有一些（更好）的方法可以做到这一点，但我无法通过任何方式开展工作。当点击一个按钮时，我试图让数据表加载新数据（来自不同的数据源）。

以下是我所拥有的：

$(document).ready(function() {

  $('#datatable2').dataTable( {

    "ajax": {
      "url":"simple4.php",
      "type":"GET"
    }  ,

    "paging":        true, 
    "pageLength": 20,
    "order": [[ 2, "asc" ]],
    "aoColumns": [
      { "bSortable": false, "width": "25%"  },
      { "bSortable": true, "width": "30%"  },
      { "bSortable": true, "width": "15%"  },
      { "bSortable": true, "width": "15%"  },

      { "bSortable": true, "width": "15%"  },
      { "bSortable": false, "width": "0%", "visible":false  },

    ],
  });

  $( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
  }); 
});

初始表（来自simple4.php）加载正常。我点击按钮（在这种情况下为id = option2）时会改变它，但是当我点击按钮时没有任何反应。

以防万一，这里是按钮代码，以防我错过了一些明显的东西：

<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="1" autocomplete="off"> Compare 1 and 2
</label>

不确定是什么问题。任何见解都会有所帮助。

更新：请参阅下面的答案解释问题。我没做过的一件事，显然会产生重大影响的是使用＆＃34; dataTable＆＃34;与＃34; DataTable＆＃34;。你需要一个大写字母D和大写字母T.这里是现在正在运行的固定代码：

$(document).ready(function() {
var table = $("#datatable2").DataTable({

  "ajax": {
    "url":"simple3.php",
    "type":"GET"
}  ,

   "paging":        true, 
   "pageLength": 20,
"order": [[ 2, "asc" ]],
  "aoColumns": [
  { "bSortable": false, "width": "25%"  },
  { "bSortable": true, "width": "30%"  },
 { "bSortable": true, "width": "15%"  },
  { "bSortable": true, "width": "15%"  },

   { "bSortable": true, "width": "15%"  },
  { "bSortable": false, "width": "0%", "visible":false  },

  ],

});
$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});
});

还有一件事......当我点击我的单选按钮时我应该触发的功能不起作用。不得不改变：

$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});

对此：

$('input[id=option2]').change(function(){
table.ajax.url( "simple4.php" ).load();
});

Answer 1

我现在无法尝试，但我认为它会起作用：

var table = $('#datatable2').dataTable({...});

$( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
});

你没有设置var table = ...所以当你调用table.ajax时... table var不存在

Answer 2

首先，正如其他人所说的那样，未设置变量'table'。

其次，当你打电话

var table = $('#datatable2').dataTable({.....})

您正在返回一个无法访问任何DataTables API的jQuery对象

要获取DataTables API实例，您需要进行如下调用：

var table = $('#datatable2').DataTable({....});

这应该有效，假设您的网址返回的数据已正确形成。

来源：https://datatables.net/faqs/#api

单击按钮后重新加载dataTables

2 个答案: