jquery 数据表 : fetch next 25 rows from databse on next page button of jQuery datatable

Question

我有大量数据要填充到 jQuery 数据表中。我正在使用 mysql 数据库。在 angularJs 中是否有可能以这样的方式使用 jQuery 数据表，即第一次只提取 25 条记录并显示在数据表中。在下一步或 2 按钮上单击下一步将提取并显示 25 条记录。

下面是我在 Angular Controller 中的数据表代码。

     $($scope.getDataPointDetails = function () {

         dataPointFactory.getDataPointDetails().then(
             function (response) {
                 for (var i = 0; i < response.data.length; i++)
                 {
                     dataPointData[i] = new Array(
                         '<i class="material-icons waves-effect" onclick="editDataPoint('+ i +');" data-toggle = "tooltip" data-placement = "left" title = "Edit">edit</i> \n\
                          <i class="material-icons waves-effect" onclick="DeleteDataPoint('+ i +');" data-toggle = "tooltip" data-placement = "left" title = "Delete">delete</i>',                          
                         response.data[i].companyName, //1
                         (response.data[i].addressLine1+', '+((response.data[i].addressLine1!==null)?response.data[i].addressLine1:'')+', '+response.data[i].city+'-'+response.data[i].pinCode), //2
                         response.data[i].state, //3
                         response.data[i].contactNos, //4
                         response.data[i].tollFreeNo, //5
                         response.data[i].compEmail, // 6
                         response.data[i].compWebsite, //7
                         response.data[i].level1, //8
                         response.data[i].level2, //9
                         response.data[i].level3, //10
                         response.data[i].remark1, //11
                         response.data[i].remark2, //12
                         response.data[i].remark3, //13 
                         response.data[i].ptc1, //14
                         response.data[i].ptc2, //15
                         response.data[i].ptc3, //16
                         response.data[i].ptc4, //17
                         response.data[i].ptc5, //18
                         response.data[i].tallySrNo, //19
                         response.data[i].tallyProdType, //20
                         response.data[i].noOfUsers, //21
                         response.data[i].tallyDuration, //22
                         response.data[i].tallyStartDate, //23
                         response.data[i].tallyEndDate, //24
                         response.data[i].drn,//25
                         response.data[i].addressLine1,//26
                         response.data[i].addressLine2, //27
                         response.data[i].city, //28
                         response.data[i].pincode //29
                         );
                 }

                 $('#dataPointViewTable').dataTable({
                     "destroy": true,
                     "aaSorting": [],
                     "deferRender": true,
                     "responsive": true,
                     "aaData": dataPointData,
                     "bAutoWidth": false,
//                     "fixedColumns":   {
//                         leftColumns: 1,
//                         rightColumns: 1
//                     },
                     "processing": true,
                     "serverSide": true,
                     "aoColumns": [
                         {"sTitle": "Action", "sWidth": "5%"},
                         {"sTitle": "Company Name", "sWidth": "5%"},
                         {"sTitle": "Address", "sWidth": "15%"},
                         {"sTitle": "State", "sWidth": "8%"},
                         {"sTitle": "Contact Number", "sWidth": "10%"},
                         {"sTitle": "Toll Free Number", "sWidth": "10%"},
                         {"sTitle": "Email Address", "sWidth": "15%"},
                         {"sTitle": "Website", "sWidth": "15%"},
                         {"sTitle": "Level1", "sWidth": "15%"},
                         {"sTitle": "Level2", "sWidth": "15%"},
                         {"sTitle": "Level3", "sWidth": "15%"},
                         {"sTitle": "Remark1", "sWidth": "15%"},
                         {"sTitle": "Remark2", "sWidth": "15%"},
                         {"sTitle": "Remark3", "sWidth": "15%"},
                         {"sTitle": "Contact Person 1(Name, Designation, Email, Mobile No.)", "sWidth": "15%"},
                         {"sTitle": "Contact Person 2(Name, Designation, Email, Mobile No.)", "sWidth": "15%"},
                         {"sTitle": "Contact Person 3(Name, Designation, Email, Mobile No.)", "sWidth": "15%"},
                         {"sTitle": "Contact Person 4(Name, Designation, Email, Mobile No.)", "sWidth": "15%"},
                         {"sTitle": "Contact Person 5(Name, Designation, Email, Mobile No.)", "sWidth": "15%"},
                         {"sTitle": "Tally Serial No", "sWidth": "15%"},
                         {"sTitle": "Product Type", "sWidth": "15%"},
                         {"sTitle": "No of Users", "sWidth": "15%"},
                         {"sTitle": "Duration", "sWidth": "15%"},
                         {"sTitle": "TSS Purshase Date", "sWidth": "15%"},
                         {"sTitle": "TSS Expiry Date", "sWidth": "15%"}]
                 });

             });
     });

我已将服务器端处理选项添加到数据表。我收到了对 $http 的响应，我可以在网络中看到它，但在表中看不到它，并且我收到了数据表的弹出式警报消息—— DataTables 警告:表 id=dataPointViewTable - Ajax 错误。有关此错误的更多信息，请参阅 http://datatables.net/tn/7

Answer 1

启用server-side processing使用 serverSide选项。

编写您自己的服务器端脚本，在服务器端处理排序、过滤和分页。 DataTables 带有 ssp.class.php，如果您选择的语言是 PHP，它可以帮助您实现这一点。