在同一Javascript文件中使用具有不同样式和Ajax的多个jQuery DataTable函数

时间:2019-03-08 17:00:44

标签: jquery datatables

我需要在同一Javascript文件中使用多个jQuery DataTable函数。我知道如果表具有相同的样式(ajax),则如何在同一页面中使用多个表。但是,我需要使用具有不同样式和Ajax的多个表。除非删除第一张表的功能,否则第二张表不会完全加载。

$(function() {
  $("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "responsive": true,
    "dom": 'lBfrtip',
    "order": [
      [1, "desc"]
    ],
    "buttons": [{
        extend: 'print',
      },
      {
        extend: 'excel',
      }, {
        extend: 'pdfHtml5',
        title: function() {
          return "PDF Export";
        },
        orientation: 'landscape',
        pageSize: 'A0',
        titleAttr: 'PDF'
      }
    ],
  });
})
}

$(document).ready(function() {
  $('#Table2').DataTable({
    "columnDefs": [{
        "width": "5%",
        "targets": [0]
      },
      {
        "width": "10%",
        "searchable": false,
        "orderable": false,
        "targets": [7]
      },
      {
        "className": "text-center custom-middle-align",
        "targets": [0, 1, 2, 3, 4, 5, 6, 7]
      },
    ],
    "language": {
      "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
    },
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "MyMethod.aspx/GetData",
      "contentType": "application/json",
      "type": "GET",
      "dataType": "JSON",
      "data": function(d) {
        return d;
      },
      "dataSrc": function(json) {
        json.draw = json.d.draw;
        json.recordsTotal = json.d.recordsTotal;
        json.recordsFiltered = json.d.recordsFiltered;
        json.data = json.d.data;

        var return_data = json;
        return return_data.data;
      }
    },
    "columns": [{
        "data": "FirstName"
      },
      {
        "data": "LastName"
      },
      {
        "data": "MemberID"
      },
      {
        "data": "UserID"
      },
      {
        "data": "ZipCode"
      },
      {
        "data": "Description"
      },
      {
        "data": "ExpiryDate"
      },
      {
        "data": "Action"
      }
    ],
    "buttons": [
      'copy', 'excel', 'pdf'
    ]
  });
});

1 个答案:

答案 0 :(得分:0)

以下解决方案有效:

var Table1 = $("[id*=Table1]").prepend($("<thead></thead>").append($("[id*=Table1]").find("tr:first"))).DataTable({

这是整个脚本:

$(document).ready(function () {
    var Table1 = $("[id*=Table1]").prepend($("<thead></thead>").append($("[id*=Table1]").find("tr:first"))).DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "dom": 'lBfrtip',
        "order": [
            [1, "desc"]
        ],
        "buttons": [{
            extend: 'print',
        },
        {
            extend: 'excel',
        }, {
            extend: 'pdfHtml5',
            title: function () {
                return "PDF Export";
            },
            orientation: 'landscape',
            pageSize: 'A0',
            titleAttr: 'PDF'
        }
        ],
    });
});
$(document).ready(function () {
    $('#Table2').DataTable({
        "columnDefs": [{
            "width": "5%",
            "targets": [0]
        },
        {
            "width": "10%",
            "searchable": false,
            "orderable": false,
            "targets": [7]
        },
        {
            "className": "text-center custom-middle-align",
            "targets": [0, 1, 2, 3, 4, 5, 6, 7]
        },
        ],
        "language": {
            "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader - color'></i></div>"
        },
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "MyMethod.aspx/GetData",
            "contentType": "application/json",
            "type": "GET",
            "dataType": "JSON",
            "data": function (d) {
                return d;
            },
            "dataSrc": function (json) {
                json.draw = json.d.draw;
                json.recordsTotal = json.d.recordsTotal;
                json.recordsFiltered = json.d.recordsFiltered;
                json.data = json.d.data;

                var return_data = json;
                return return_data.data;
            }
        },
        "columns": [{
            "data": "FirstName"
        },
        {
            "data": "LastName"
        },
        {
            "data": "MemberID"
        },
        {
            "data": "UserID"
        },
        {
            "data": "ZipCode"
        },
        {
            "data": "Description"
        },
        {
            "data": "ExpiryDate"
        },
        {
            "data": "Action"
        }
        ],
        "buttons": [
            'copy', 'excel', 'pdf'
        ]
    });
});