Используйте несколько функций jQuery DataTable в одном файле Javascript с другим стилем и ajax

Question

Мне нужно использовать несколько функций jQuery DataTable в одном и том же файле Javascript. Я знаю, как использовать несколько таблиц на одной странице, если таблицы имеют одинаковый стиль, 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'
    ]
  });
});

Answer 1

Работает следующее решение:

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