Question

请帮助

我正在使用datatables jQuery Plugin来显示一个表，它显示了没有分页的所有条目的问题。请帮助这是我的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>

这是我的控制器

  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" },
                 ]
});

}）;

Answer 1

看起来你没有使用“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);
}

jQuery datatables插件分页不起作用

1 个答案: