EasyUI下datagrid的AJAX真分页

HTML代码：这里pageList必须要包含pageSize，要不然会报错，默认状态下好像不会，最好还是详细的定义一下

<table id="tblVideoSearch" height="585px" title="111" class="easyui-datagrid" data-options="rownumbers:true,singleSelect:true,autoRowHeight:false,pagination:true,pageNumber:1,pageSize:20,pageList:[10,20,30],remoteSort:false">
                        <thead>
                            <tr>
                                <th align="center" field="streamNumber" width="20%">列名1
                                </th>
                                <th align="center" field="checkAreaNo" width="20%">列名2
                                </th>
                                <th align="center" field="checkPerson" width="20%">列名3
                                </th>
                                <th align="center" field="carIdentificationNumber" width="20%">列名4
                                </th>
                                <th align="center" field="preview" width="10%" data-options="formatter:rowformater">预览
                                </th>
                            </tr>
                        </thead>
                    </table>

 

JavaScript代码（查询事件方法）：

function queryPreviewVideoInfo(pageIndex,pageSize) {
　　　　　//查询条件
        var streamNumber = $('#streamNumber').textbox('getValue');
　　　　　//查询条件　
        var carIdentificationNumber = $('#carIdentificationNumber').textbox('getValue');
　　　　　//查询条件
        var checkPerson = $('#checkPerson').textbox('getValue');
　　　　//查询条件
        var checkAreaNo = $('#checkAreaNo').textbox('getValue');
　　　　//查询条件
        var searchStarTime = $('#searchStarTime').datebox('getValue');
　　　　//查询条件
        var searchEndTime = $('#searchEndTime').datebox('getValue');
　　　　//Ajax请求
        $.ajax({
            url: "Ajax.aspx",
            type: 'post',
            data: {
                option: "QueryPreviewVideoInfo",
                streamNumber: streamNumber,
                carIdentificationNumber: carIdentificationNumber,
                checkPerson:checkPerson,
                checkAreaNo:checkAreaNo,
                searchStarTime:searchStarTime,
                searchEndTime: searchEndTime,
                pageSize: pageSize,
                pageIndex:pageIndex
            },
            dataType: 'json',
            timeout: 10000,
　　　　　　　//返回json格式的数据，这个自定义。
            success: function (res, status) {
                if (res.code === "1") {
                    $("#tblVideoSearch").datagrid({
                        data: res.PreviewVideoInfo,
                        nowrap: true,
                        singleSelect: true
                    });
                    var pager = $("#tblVideoSearch").datagrid("getPager"); //获取表格
                    pager.pagination({
                        onSelectPage: function (pageIndex, pageSize) { //翻页事件，pageIndex和pageSize均为翻页后的返回值
                            queryPreviewVideoInfo(pageIndex, pageSize);
　　　　　　　　　　　　　　　　　//设置翻页后显示的当前页数
                            $("#tblVideoSearch").datagrid({ pageNumber: pageIndex });
                        },
                        onChangePageSize: function (pageSize) {//表格左下角，调整每页大小事件
                            queryPreviewVideoInfo(1,pageSize);
　　　　　　　　　　　　　　　　　//初始化表格页数和每页大小
                            $("#tblVideoSearch").datagrid({ pageNumber: 1,pageSize:pageSize });
                        }
                    });
                    
                }
                else {
                    alert(res.value);
                }
            },
            fail: function (err, status) {
                alert(err);
            }
        });
    }
});

 

其中“预览”列每行显示预览连接的JavaScript代码：

function rowformater(value, row, index) {
    return "<a class='reviewButton' href=111.aspx?i=" + row.streamNumber + " target='_blank'>预览</a>";
}

　　

 搜索按钮点击事件JavaScript代码：

$('#btnsearch').click(function () {
        //需要点击时，重新定义其页码和大小，要不然多次点击搜索时行号会乱掉
        $("#tblVideoSearch").datagrid({ pageNumber: 1, pageSize: 20 });
        queryPreviewVideoInfo(1, 20);
    });