2016-06-06 2 views
0

Я использую pagination Datatable с Node.js. Вот мой код HTMLdatatable застрял на обработке при нажатии на индекс страницы

<button id="btnSearch" type="submit" class="btn btn-responsive"><i class="icon-search"></i>&nbsp;Search</button> 

<div class="box-body table-responsive no-padding"> 
    <div id="tableContainer"> 
     <table class="table table-hover" id="dataTables1"> 
      <thead> 
      <tr> 
       <th class="text-left">base</th> 
       <th class="text-left">base1</th> 
      </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
    </div> 
    <div class="text-center"> 
      <img id="loading-image" src="../dist/img/loading_spinner.gif" style="display: none;" /> 
    </div> 
</div> 

Вот код сценария

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("#btnSearch").click(function() { 
     RefreshTable("#dataTables1"); 
    }); 

    function buildAjaxSourcUrl() { 
     var orgURL = '?schemename=abc'; 

     if (orgURL.length > 1) { 
      orgURL = 'http://127.0.0.1:3000/statistic' + orgURL; 
     } else { 
      orgURL = 'http://127.0.0.1:3000/statistic'; 
     } 
     return orgURL; 
    } 

    function RefreshTable(tableId) { 
     var urlData = buildAjaxSourcUrl(); 
     table = $(tableId).dataTable(); 
     table._fnClearTable(table.oSettings); 
     table.fnDestroy(); 
     table.fnDraw(true); 
     var table2 = $(tableId).dataTable({ 
      "bServerSide": true, 
      "bProcessing": true, 
      "responsive": true, 
      "bDestroy": true, 
      "bAutoWidth": false, 
      oLanguage: { 
       sProcessing: "<img src='../dist/img/loading_spinner.gif'/>" 
      }, 
      "aLengthMenu": [2, 30, 50, 100], 
      "pageLength": 2, 
      "sAjaxDataProp": "data", 
      "sAjaxSource": urlData, 
      "fnServerData": function (sSource, aoData, fnCallback) { 
       $.ajax({ 
        "dataType": 'json', 
        "type": "POST", 
        "url": sSource, 
        "data": aoData, 
        "success": fnCallback 
       }); 
      }, 
      "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>", 
      "sPaginationType": "full_numbers",//"full_numbers", 
      "columns": [ 
       { "data": "base1" }, 
       { "data": "base2" } 
      ] 
     }); 
    } 
</script> 

И вот мой код на стороне сервера узел JS

exports.test = function(req, res) { 
    console.log("test"); 

    var start = req.body.iDisplayStart; 
    var pageSize = req.body.iDisplayLength; 

    ManagerExport.getTotalUser(function(count){ 
     ManagerExport.getUser(start, pageSize, function(Users) { 


      var response = { 
       draw: 2, 
       recordsTotal: count[0].count, 
       recordsFiltered: count[0].count, 
       data: Users 
      }; 
      console.log(response); 
      res.send(response); 

     }); 
    }); 
} 

в виду, когда я нажимаю на кнопки поиск я получаю 2 записи пользователя enter image description here после этого я нажимаю на кнопку указателя 2, затем страница застревает при обработке, пожалуйста, предложите мне решение исправить эту проблему м. Спасибо за приключениями

enter image description here

+0

Что такое 'console.log (response);' печать во втором запросе? Печатает ли что-нибудь вообще? 'count [0] .count' может быть' undefined', и ваш ответ никогда не будет возвращен пользователю. – ulughbekula

+0

Ответ: {«draw»: 2, «recordsTotal»: 24, «recordsFiltered»: 24, «data»: [{«base1»: 40, «base2»: «открытие»}, {"base1": 38 , «base»: «открытие»}]} – beginerdeveloper

+0

count [0], count = 24 – beginerdeveloper

ответ

0

, что обработка изображения появляется, когда bProcessing истинно (который вы укажете в конструкторе для DataTable). Вы можете попробовать установить значение в значение false после возврата вызова ajax, чтобы он исчез.

+0

, но мой пейджинг не работает, страница все еще отображает первую страницу – beginerdeveloper

0

Убедитесь, что вы преобразовали параметр draw в int перед возвратом в datatable, и возвращаете параметр draw в соответствии с параметром, присваиваемым datatable.

def data=['draw':Integer.parseInt(params.draW),...] 
    return data as JSON 
Смежные вопросы