easyui前台分页

easyui前台分页

前台分页适用于数据量较少的情况,整个表格的数据只需要查一遍即可,这样可以减少数据库连接次数;

js代码

画重点:loadFilter:pagerFilter,

    $('#table').datagrid({
            width:'auto',
            fitColumns : false,
            fit : true,
            singleSelect : false,
            pagination : true,
            pageList : [5,10, 20 ,50,100],
            pageSize : 20,
            rownumbers : true,
            loadFilter:pagerFilter,
            emptyMsg : '未找到相应数据!',
            onLoadSuccess : function(data) {
                var opts = $(this).datagrid('options');
                var vc = $(this).datagrid('getPanel').children('div.datagrid-view');
                vc.children('div.datagrid-empty').remove();
                if (!$(this).datagrid('getRows').length) {
                    var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
                    d.css({
                        position : 'absolute',
                        left : 0,
                        top : 50,
                        width : '100%',
                        textAlign : 'center'
                    });
                }
            }
        });

 function pagerFilter(data) {  
                if (typeof data.length == 'number' && typeof data.splice == 'function') { 
                    data = {  
                        total: data.length,  
                        rows: data  
                    }  
                }  
                var dg = $(this);  
                var opts = dg.datagrid('options');  
                var pager = dg.datagrid('getPager');  
                pager.pagination({  
                    onSelectPage: function (pageNum, pageSize) {  
                        opts.pageNumber = pageNum;  
                        opts.pageSize = pageSize;  
                        pager.pagination('refresh', {  
                            pageNumber: pageNum,  
                            pageSize: pageSize  
                        });  
                        dg.datagrid('loadData', data);  
                    }  
                });  
                if (!data.originalRows) {  
                    data.originalRows = (data.rows);  
                }  
                var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);  
                var end = start + parseInt(opts.pageSize);  
                data.rows = (data.originalRows.slice(start, end));  
                return data;  
            }