easyui datagrid分頁

datagrid分頁設置 pagination="true" 貌似是不行的！  只是顯示分頁工具欄 沒有達到分頁效果  

前端

$(function (){       
        
        var p = $('#dgVehicle').datagrid().datagrid('getPager');        
        p.pagination({
            pageSize: 20,
            pageList:[10,20,30,40,50],
            beforePageText: '第',
            afterPageText:'共{pages}頁',
            displayMsg: '當前顯示 {from} 到 {to} ,共{total}記錄'

            //onBeforeRefresh: function () {
            //    alert('before refresh');
            //},
            //onRefresh: function (pageNumber, pageSize) {
            //    alert(pageNumber);
            //    alert(pageSize);
            //},
            //onChangePageSize: function () {
            //    alert('pagesize changed');
            //},
            //onSelectPage: function (pageNumber, pageSize) {
            //    alert(pageNumber);
            //    alert(pageSize);
            //}
        });

 

<div id="tb" style="padding: 2px; height: auto">
    <div>
        @*<a href="javascript:void(0)" onclick="cre('@Url.Action("VeCreate")')" class="easyui-linkbutton" iconcls="icon-add" plain="true">添加</a>*@
        <a href="javascript:void(0)" onclick="mod('@Url.Action("VeEdit")')" class="easyui-linkbutton" iconcls="icon-edit" plain="true">修改</a>
        <a href="javascript:void(0)" onclick="del('@Url.Action("VeDelete")')" class="easyui-linkbutton" iconcls="icon-remove" plain="true">刪除</a>
        <a id="btnSel" href="javascript:void(0)" onclick="sel()" class="easyui-linkbutton" iconcls="icon-search" plain="true">查詢</a>
    </div>
</div>
<table id="dgVehicle" class="easyui-datagrid" data-options="singleSelect:true,toolbar:'#tb',fit:true,fitColumns:true" title="車輛信息"
       rownumbers="true" pagination="true"  url="@Url.Action("VehicleData")">

    <thead>
        <tr>
            <th data-options="field:'strVehicleModel'">
                車輛型號
            </th>
            <th data-options="field:'strBatchNo'">
                車輛批次
            </th>
            <th data-options="field:'strVIN'">
                VIN碼
            </th>

            <th data-options="field:'strEngineModel'">
                發動機型號
            </th>
            <th data-options="field:'strEngineNo'">
                發動機編號
            </th>
            <th data-options="field:'strEngineMaker'">
                發動機製造商
            </th>
            <th data-options="field:'strEngineLineage'">
                發動機系族
            </th>
            <th data-options="field:'strEngineAddress'">
                發動機生產廠地址
            </th>
            <th data-options="field:'strBrand'">
                發動機廠牌
            </th>
            <th data-options="field:'strStatus'">
                狀態
            </th>
        </tr>
    </thead>
</table>

前端經過get方式得到 json的數據 解析綁定到datagrid上 後端只用實現controller中的action就行        

//這裏的rows page是自動的 不用去寫 直接得到就能獲得當前的數據 rows是pagesize page是第幾頁　　
//只要代碼寫的沒問題，easyui下面的分頁插件中,好比選擇每頁顯示多少行和上一頁、下一頁事件是自動觸發的。
//page和rows也是esyui每次自動傳到後臺的，不須要本身手寫

int rows = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
int page = Request["page"] == null ? 1 : int.Parse(Request["page"]);
List<VehicleModel> lst = new List<VehicleModel>();
var array = Fquery.ToArray();
for (int i = (page - 1) * rows; i < page * rows && i < array.Length; i++)
{
lst.Add(array[i]);
}

//最重要的是在後臺取數據放在json中要添加個參數total來存放數據的總行數，若是沒有這個參數則不能分頁
int total = array.Length;

var result = new { total = total, rows = lst };

return Json(result);

 

 

　　效果已出