的jQuery插件數據表分頁不工作

我使用的DataTable jQuery插件顯示一個表，它顯示所有條目，而不分頁問題，請幫助。請幫助，這是我index.cshtml

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 
<html>  
    <head> 
     <title>jQuery DataTables/ASP.NET MVC Integration</title> 
     <link href="~/Content/dataTables/demo_table.css" 
      rel="stylesheet" type="text/css" />   
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <script src="~/Scripts/jQuery.dataTables.min.js" 
      type="text/javascript"></script> 
     <script src="~/Scripts/index.js" 
      type="text/javascript"></script> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="demo"> 
       <h2>Index</h2> 
       <table id="myDataTable" class="display"> 
        <thead> 
         <tr> 
          <th>firstName</th> 
          <th>lastName</th> 
         </tr> 
        </thead> 
        <tbody> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

，這是我CONTROLER

public ActionResult AjaxHandler(JQueryDataTableParamModel param) 
     { 
      List<string[]> myList = new List<string[]>(); 

      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      myList.Add(new[] { "bla", "blabla" }); 
      return Json(new 
          { 
           sEcho = param.sEcho, 
           iTotalRecords = myList.Count(), 
           iTotalDisplayRecords = myList.Count(), 
           aaData = myList 
          }, 
         JsonRequestBehavior.AllowGet); 
     }

，這是JS文件

$(document).ready(function() { 

    var oTable = $('#myDataTable').dataTable({ 
     "bServerSide": true, 
     "sAjaxSource": "Home/AjaxHandler", 
     "bProcessing": true, 
     "aoColumns": [ 
         { "sName": "firstName" }, 
         { "sName": "LastName" }, 
        ] 
    }); 
});

即使我嘗試修改這個js文件，但保持顯示沒有分頁的所有數據

$（document）.ready（function （）{

var oTable = $('#myDataTable').dataTable({ 
    "bServerSide": true, 
    "sAjaxSource": "Home/AjaxHandler", 
    "bProcessing": true, 
    "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]], 
    "iDisplayLength": 25, 
    "aoColumns": [ 
        { "sName": "firstName" }, 
        { "sName": "LastName" }, 
       ] 
});

}）;

來源

2013-10-25 monther zlatan

不知道??????????????? ?????????????? –

pleaaaaaaaaaaaaaaase任何想法 –

即使我添加「bPaginate」：真實，但仍是同樣的錯誤它出現在顯示1至42個entres 25 BUTTOM但它表明42 –

看起來你沒有使用「sDom」，這是一個數據表選項。有關詳細信息，請參考這裏：https://datatables.net/usage/options

你的js文件：

$("#myDataTable").dataTable({ 
    "bServerSide": true, 
    "sAjaxSource": "/Home/AjaxHandler", 
    "bProcessing": false, 
    "sPaginationType": "full_numbers",    
    "aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], 
    "iDisplayLength": 10, 
    "sDom": '<"table_top"fl<"clear">>,<"table_content"t>,<"table_bottom"ip<"clear">>', 
    "aoColumns": [ 
        {"sName": "firstName"}, 
        {"sName": "LastName"} 
    ] 
});

AjaxHandler行動：

public ActionResult AjaxHandler(JQueryDataTableParamModel param) 
{ 
    List<string[]> myList = new List<string[]>(); 

    myList.Add(new[]{"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] {"bla", "blabla" }); 
    myList.Add(new[] { "bla", "blabla" }); 
    myList.Add(new[] { "bla", "blabla" }); 
    myList.Add(new[] { "bla", "blabla" }); 

    var displayedLists = myList.Skip(param.iDisplayStart).Take(param.iDisplayLength); 
    var result = from c in displayedLists select c; 
    return Json(new 
    { 
     sEcho = param.sEcho, 
     iTotalRecords = myList.Count(), 
     iTotalDisplayRecords = myList.Count(), 
     aaData = result 
    },JsonRequestBehavior.AllowGet); 
}

來源

2013-10-26 02:09:15 Lin

我試試你的代碼，但整個頁面在此消失情況下，在控制檯沒有任何javascript錯誤。 –

即使我加「bPaginate」：true，但仍然是相同的錯誤它出現在buttom中顯示1到25的42個entres，但它顯示42個條目 –

我編輯了上面的代碼一點。我試過了，現在對我很有用。對於這個「sAjaxSource」：「/ Home/AjaxHandler」，也許你在Home之前需要「/」。第二個是添加「sPaginationType」：「full_numbers」，它應該工作。 – Lin

的jQuery插件數據表分頁不工作

回答

相關問題