easyui datagrid mysql分页_easyui datagrid加载数据和分页

标签：

pageEncoding="UTF-8"%>

String basepath = request.getContextPath();

%>

Insert title here

href="/easyui/themes/default/easyui.css">

href="/easyui/themes/icon.css">

href="/easyui/demo.css">

Client Side Pagination in DataGrid

This sample shows how to implement client side pagination in

DataGrid.

style="width: 700px; height: 300px"

data-options="

rownumbers:true,

singleSelect:true,

autoRowHeight:false,

pagination:true,

pageSize:10">

iduserNameage

(function($) {

function pagerFilter(data) {

if ($.isArray(data)) { // is array

data = {

total : data.length,

rows : data

}

}

var dg = $(this);

var state = dg.data(‘datagrid‘);

var opts = dg.datagrid(‘options‘);

if (!state.allRows) {

state.allRows = (data.rows);

}

var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);

var end = start + parseInt(opts.pageSize);

data.rows = $.extend(true, [], state.allRows.slice(start, end));

return data;

}

var loadDataMethod = $.fn.datagrid.methods.loadData;

$.extend($.fn.datagrid.methods,

{

clientPaging : function(jq) {

return jq.each(function() {

var dg = $(this);

var state = dg.data(‘datagrid‘);

var opts = state.options;

opts.loadFilter = pagerFilter;

var onBeforeLoad = opts.onBeforeLoad;

opts.onBeforeLoad = function(param) {

state.allRows = null;

return onBeforeLoad.call(this, param);

}

dg.datagrid(‘getPager‘).pagination({

onSelectPage : function(pageNum, pageSize) {

opts.pageNumber = pageNum;

opts.pageSize = pageSize;

$(this).pagination(‘refresh‘, {

pageNumber : pageNum,

pageSize : pageSize

});

dg.datagrid(‘loadData‘, state.allRows);

}

});

$(this).datagrid(‘loadData‘, state.data);

if (opts.url) {

$(this).datagrid(‘reload‘);

}

});

},

loadData : function(jq, data) {

jq.each(function() {

$(this).data(‘datagrid‘).allRows = null;

});

return loadDataMethod.call($.fn.datagrid.methods,

jq, data);

},

getAllRows : function(jq) {

return jq.data(‘datagrid‘).allRows;

}

})

})(jQuery);

function getData() {

var rows = "";

/* for (var i = 1; i <= 800; i++) {

var amount = Math.floor(Math.random() * 1000);

var price = Math.floor(Math.random() * 1000);

rows.push({

inv : ‘Inv No ‘ + i,

date : $.fn.datebox.defaults.formatter(new Date()),

name : ‘Name ‘ + i,

amount : amount,

price : price,

cost : amount * price,

note : ‘Note ‘ + i

});

} */

$.ajax({

method : ‘POST‘,

url : ‘/egoTest/user/getAjaxUser2.do‘,

async : false,

dataType : ‘json‘,

success : function(data) {

rows = data;

},

error : function() {

alert(‘error‘);

}

});

return rows;

}

$(function() {

$(‘#dg‘).datagrid({

data : getData()

}).datagrid(‘clientPaging‘);

});

a index jsp page ! ${list}

用户ID名称年龄操作

${u.id}${u.userName }${u.age } 修改

@RequestMapping("/getAjaxUser2")

public void getAjaxUser2(HttpServletRequest request,

HttpServletResponse response, ModelMap modelMap) {

try {

response.setContentType( "text/html;charset=UTF-8");

List uList = userService.getAllUser();

Map map = new HashMap();

// map.put( "total",total);

map.put("allRows", 57);

map.put("rows", uList);

JSONObject json = JSONObject.fromObject(map);

// String str = "aabbcc";

PrintWriter pw = response.getWriter();

pw.write(json.toString());

pw.flush();

pw.close();

} catch (Exception e) {

e.printStackTrace();

}

}

标签：