Javaweb笔记之easyui数据绑定&分页

easyui分页&数据绑定

$(function(){
	//获取表格
	$("#myTable").datagrid({
		//绑定表头：columns列/字段
		//第一个参数
		columns:[[
			{field:'bookid',title:'书本编号',width:100},
			{field:'bookname',title:'书本名称',width:100},
			{field:'bookprice',title:'书本单价',width:100},
			{field:'booktype',title:'书本类型',width:100}
		]],
		//向后台发送ajax请求
		url:ctx+"/bookServlet.do",
		//分页
		pagination: true,// 设置是否显示分页标签
	    singleSelect:true,// 如果为true，则只允许选择一行(否则点一行选择一行，很丑)
	    loadMsg:"正在加载数据...",//加载数据的时候显示提示消息。
	});
	//给查询按钮添加事件
	$("#btn_search").click(function(){
		query();
	})
	/* 设置分页组件的文字描述  */
	var p = $('#myTable').datagrid('getPager'); 
	$(p).pagination({ 
		pageSize: 10,//每页显示的记录条数，默认为10 
		pageList: [10,20,30,50,60,70,80,90,100],//可以设置可以选择的页大小(下拉框的内容)
		beforePageText: '第',//页数文本框前显示的汉字 
		afterPageText: '页    共 {pages} 页', 
		displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
	}); 
})
 
//向后台发送模糊查询关键字方法
function query(){
	$('#myTable').datagrid('load',{
		bookName:$("#bookName").val(),
	});
}