Question

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

下面是角度控制器中数据表的代码。

     $($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警告：table id = dataPointViewTable - Ajax错误。有关此错误的详细信息，请参阅http://datatables.net/tn/7

Answer 1

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

编写自己的服务器端脚本，处理服务器端的排序，过滤和分页。 DataTables附带ssp.class.php，如果您的选择语言是PHP，则可以帮助您。

jquery datatable：从jatab数据表的下一页按钮的databse获取接下来的25行

1 个答案: