通过函数刷新/重新绘制数据表

Refresh / Redraw Datatables over function

本文关键字：绘制 数据表 新绘制 函数 刷新      更新时间：2023-09-26

并且我通过函数调用数据表。这是我的功能：

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);
});

如何处理？

谢谢？？

请尝试

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();
});

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

相关文章：