jquery datatable : 다음 페이지의 databse에서 다음 25 행 가져 오기 jQuery 데이터 테이블의 버튼

Question

jQuery 데이터 테이블에 대량의 데이터를 채울 수 있습니다. 나는 mysql 데이터베이스를 사용하고있다. angularJs에서 처음으로 25 개의 레코드 만 추출하여 데이터 테이블에 표시하는 방식으로 jQuery 데이터 테이블을 사용할 수 있습니까? 다음 또는 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

serverSide 옵션을 사용하여 server-side processing을 사용하십시오.

서버 측에서 정렬, 필터링 및 페이지 매김을 처리 할 서버 측 스크립트를 작성하십시오. DataTables는 ssp.class.php과 함께 제공되며 choise 언어가 PHP 인 경우 도움이됩니다.