将数据库记录加载到bootstrap数据表中

Question

我有大约8000个客户记录，我必须使用AJAX将所有记录加载到引导数据表中，它的工作正常，但我的挑战是需要更长的时间来完成加载和填充数据表。 我必须加载所有8000个客户，因为用户可以随时选择任何客户并使用

请知道如何优化它，它真的放慢了asp.net网站的速度 以下是我的代码

<script type="text/javascript">
        var datatableVariable = null
        $(document).ajaxSend(function (event, request, settings) {
            $('#loading-indicator').show();
        });
        $(document).ready(function () {
            "responsive"; true,
            "serverSide"; true,
            "info"; true,
            "stateSave"; true,
         $.ajax({
             type: "POST",
             dataType: "json",
             url: "CustomerService.asmx/GetCustomer",
             success: function (data) {
                 datatableVariable = $('#dtCustomers').DataTable({
            
                     data: data,
                     columns: [
                         { 'data': 'iD' },
                         { 'data': 'AccountNumber' },
                         { 'data': 'Name' },
                          { 'data': 'FirstName' },
                           { 'data': 'LastName' },
                            { 'data': 'Balance' },
                             { 'data': 'TypeOfAccount' },
                             { 'data': 'Phone' },
                             { 'data': 'SMSAlert' }
                     ],
                     columnDefs: [
                 { "visible": false, "targets": 0 },
                  { "visible": false, "targets": 3 },
                   { "visible": false, "targets": 4 },
                   { "visible": false, "targets": 5},
                   { "visible": false, "targets": 6 },
                   { "visible": false, "targets": 7 },
                   { "visible": false, "targets": 8 }
                     ]
                 });
                 datatableVariable.columns().every(function () {
                     var column = this;
                     $(this.footer()).find('input').on('keyup change', function () {
                         column.search(this.value).draw();
                     });
                 });
                 $('.showHide').on('click', function () {
                     var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                     tableColumn.visible(!tableColumn.visible());
                 });
                 $(document).ajaxComplete(function (event, request, settings) {
                     $('#loading-indicator').hide();
                 });
             }
         });
        });
        $('#dtCustomers').on('click', 'tr', function () {
                     debugger
                     var data = datatableVariable.row(this).data();
                     $(document.getElementById('<%= customerids.ClientID %>')).val(data.iD);
                     $(document.getElementById('<%= lblFnames.ClientID %>')).val(data.FirstName);
                     $(document.getElementById('<%= lblLnames.ClientID %>')).val(data.LastName);
                     $(document.getElementById('<%= lblacc.ClientID %>')).val(data.AccountNumber);
                     $(document.getElementById('<%= lblBals.ClientID %>')).val(data.Balance);
                     $(document.getElementById('<%= acctypes.ClientID %>')).val(data.TypeOfAccount);
                     $(document.getElementById('<%= phone.ClientID %>')).val(data.Phone);
                     $(document.getElementById('<%= smsalert.ClientID %>')).val(data.SMSAlert);
                        var imgDisplay = $get("imgDisplay");
                        imgDisplay.src = "";
                        imgDisplay.style.cssText = "";
                        var img = new Image();
                        img.onload = function () {
                            imgDisplay.style.cssText = "height:150px;width:150px";
                            imgDisplay.src = img.src;
                        };
                        img.src = "<%=ResolveUrl(UploadFolderPath) %>" + data.CustomerPicture;
                     switch (data.TypeOfAccount) {
                         case 0:
                             $('#<%= withid.ClientID %>').hide()
                             break;
                         case 4:
                             $('#<%= withid.ClientID %>').show()

                             break;
                         
                         default:

                     }
        });
        
    </script>