2017-11-25 155 views
1

我有大量的数据,我想在jQuery数据表中填充。我正在使用mysql数据库。是否有可能在angularJs中以这种方式使用jQuery数据表,第一次只有25条记录将被提取并显示在数据表中。在下一个或2个按钮上点击下一个25条记录将被提取并显示。jquery datatable:从databse获取下一个25行jQuery数据表的下一页按钮

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

 $($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

+0

显示您的代码。 – urfusion

回答

0

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

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

相关问题