easyUi-datagrid 真分頁 + 工具欄添加控件

1、  新建Pager.js

/**
 * 
 * @param {any} el  元素
 */


function showDataGrid1(el) {
    $(el).datagrid({
        title: '分頁的gridview',
        url: '/Home/GetPagerUserInfo',   //一個用以從遠程站點請求數據的超鏈接地址。
        method: 'get', //請求遠程數據的方法類型  默認 post
        loadMsg: '數據正在加載，請稍等...',//當從遠程站點載入數據時，顯示的一條快捷信息。
        pagination: true,     //開啟分頁  
        pageSize: 10,         //分頁大小  
        pageNumber: 1,         //第幾頁顯示（默認第一頁，可以省略）  
        pageList: [10, 20, 30, 50], //設置每頁記錄條數的列表 
        width:1000,
        columns: [[
            {
                field: '',
                title: '',
                checkbox: true
            },
            {
                field: 'Name',
                title: '姓名',
                width: 100,
                sortable: true,        //設置為true允許對該列排序。                          
            },
            { field: 'Age', title: '年齡', width: 100 },
            { field: 'Work', title: '工作', width: 100 },
        ]],
        fitColumns: true,
    });

    //  工具欄  加控件
    var pager = $(el).datagrid().datagrid('getPager');    // get the pager of datagrid
    pager.pagination({
        buttons: [{
            iconCls: 'icon-search',
            handler: function () {
                $.messager.alert('這是標題', 'search')
            }
        }, {
            iconCls: 'icon-add',
            handler: function () {
                alert('add');
            }
        }, {
            iconCls: 'icon-edit',
            handler: function () {
                alert('edit');
            }
        }]
    });            

}

2  前端

  <!--真分頁-->
    <div>
        <table id="dgv2" ></table>
    </div>



<script src="~/Scripts/EasyUI/Pager.js"></script>


    $(document).ready((function () {

        // 這個地方必須要放在這個里面，否則會導致有邊框不顯示
       // showDataGrid("#dgv");
        showDataGrid1("#dgv2");
       
    }));

　　3  展示