【UI集锦】EasyUI-datagrid分页查询前端显示

    数据表格对于做项目来说尤其是后台，是经常遇到的。便于人们对数据的分析和操作。EasyUIdatagrid数据表格，有两种方式可以实现，一种是用JSP写，另一种是用JS拼表格。

    第一种：JSP代码 

<table class="easyui-datagrid" id="dg"  "
			data-options="rownumbers:true,singleSelect:false,pagination:true,url:'comment_findcommentpage.action',method:'get'">
		<thead style="width: 800px; margin-left: 20px;">
			<tr>
				<th data-options="field:'ck',width:100,checkbox:true"></th>
				<th data-options="field:'iD',hidden:true">id</th>
				<th data-options="field:'name',width:100">账户名称</th>
				<th data-options="field:'bankName',width:100">开户行</th>
				<th data-options="field:'hangLianHao',width:100">银行联号</th>
				<th data-options="field:'bankAccount',width:100">卡号</th>
				<th data-options="field:'state',width:100">状态</th>
			</tr>
		</thead>

</table>

    其中URL里面执行的后台action中数据查询方法。

    第二种：JS拼接

 $("#dg").datagrid({
		    nowrap: true ,//是否只显示一行，即文本过多是否省略部分
		    fitColumns:false,
		    width:'auto',
		    height: 'auto',
		    pageNumber:1,
		    collapsible:true,
		    rownumbers:true,//显示行号
		    loadMsg:'数据装载中......',
		    pagination:true,	//是si否显示分页工具
		    url:'comment_findcommentpage.action',
		    method:'post',
		    remoteSort: false,
		    singleSelect:false,
		     columns:[
					    [	
						{field:'ck',width:60,align:'center',checkbox:true},
						{field:'id',hidden:true},
						{field:'productname',title:'商品名称',width:100,align:'center',sortable : true},
						{field:'assessContents',title:'评论内容',width:100,align:'center',sortable : true},
						{field:'username',title:'留言人姓名',width:100,align:'center',sortable : true},
						{field:'date',title:'日期',width:100,align:'center',sortable : true}
					        	
					    ]
				    ]

     	 })

   给大家看一下效果：

   

    其实里面还有很多的设置，是否要分页，数据加载时要显示的文字等等。easyUI对我们这些菜鸟来说简直是救星，方便简单。一般数据表格都要带着分页，所以只学会怎么设置界面是不行的，还要有后台的分页查询才行啊。下篇将要介绍SSH2框架中的分页查询后台是怎么实现的，大家敬请期待！