Saya perlu menggunakan beberapa fungsi jQuery DataTable dalam file Javascript yang sama. Saya tahu cara menggunakan beberapa tabel di halaman yang sama jika tabel memiliki gaya yang sama, ajax. Namun, saya perlu menggunakan beberapa tabel dengan gaya & ajax yang berbeda. Tabel kedua tidak dimuat sepenuhnya kecuali saya menghapus fungsi untuk tabel pertama.

$(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
Shane 8 Maret 2019, 20:00

1 menjawab

Jawaban Terbaik

Solusi berikut berfungsi:

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

Inilah seluruh skrip:

$(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'
        ]
    });
});
0
Shane 20 Mei 2019, 19:05