Question

我在函数上调用数据表。这是我的功能：

function drawTable(yearParameter) {
            var oTable = $('#horizontal-monthly').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url : '{!! route('adm1n.laporan-bulanan-data') !!}',
                    data : function (d) {
                        d.year = yearParameter;
                    }
                },
                columns: [
                  { data: 'B_01', name: 'B_01', sortable: false },
                  { data: 'B_02', name: 'B_02', sortable: false }
                ],
                dom : '<"dt-panelmenu clearfix"lr>t<"dt-panelfooter clearfix"ip>',
            });
        }

我有事件change来调用上面的函数并传递参数。如何重新加载数据表？因为现在数据表不会重新加载。

我尝试使用：

oTable.destroy();
oTable.draw();

它使数据表功能无法正常工作。像搜索，分页等。

修改这是我的change事件：

$('#year-value').on('change', function(e) {
      var yearParam = $('#year-value').val();
      drawTable(yearParam);
});

如何处理？

谢谢??

Answer 1

请尝试

oTable.clear();
oTable.draw();

另外，我能看到你的变化事件吗？我可以帮你重新添加行

更新2

好的，你不能多次调用DT构造函数。首先，您要做的是将DT对象保存为全局对象。

function drawTable() {
  if(!oTable)
  {
        oTable = $('#horizontal-monthly').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url : '{!! route('adm1n.laporan-bulanan-data') !!}',
                data : function (d) {
                    d.year = filterYearParam;
                }
            },
            columns: [
              { data: 'B_01', name: 'B_01', sortable: false },
              { data: 'B_02', name: 'B_02', sortable: false }
            ],
            dom : '<"dt-panelmenu clearfix"lr>t<"dt-panelfooter clearfix"ip>',
        });
    }
 }
 else
 {
      oTable.ajax.reload().draw();
 }

$('#year-value').on('change', function(e) {
  filterYearParam = $('#year-value').val();
  drawTable();
});

试试这个，然后我可以尝试让你的一年工作。

刷新/重绘数据表的功能

1 个答案: