jquery datatables 表格宽度

转载

mob64ca14089531 2024-12-29 14:22:22

jquery datatables 表格宽度_控件

通常情况下页面数据的分页显示分成真假两种。真分页是依靠后台查询时控制调出数据的数量来实现分页，也就是说页面在后台对数据进行处理，仅传输当前需要页的数据到前台来显示。而假分页则是后台一次性将所有的数据一起传送到前台，再由前端程序来控制数据的显示与遮蔽。

既然要分页，那么首先就必须要获得所有的数据，并且知道数据的数量。这步可以是由后台程序返回告知，当然也可以有javascript自己去读取。

datagrid分页有一个附加的分页控件，只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和page;//当前第几页，然后读取相应页数的记录，和总记录数total一块返回即可，页面如上图所示。

核心代码

要想实现分页其pagination属性必须为true：

//设置分页控件，设置其各个属性值与是否要允许列排序等

[html] view plain copy

print ?

1. <span style="font-family:SimSun;font-size:18px;"><table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto;  
2. idfield="itemid" pagination="true" iconcls="                                                                icon-save" remoteSort="false"   
3. data-options="rownumbers:true,  
4.         url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],  
5. fitcolumns="true" striped="true"></span>

一般处理程序中获取前台传过来的pageRows，page，

[csharp] view plain copy

print ?

1. <span style="font-family:SimSun;font-size:18px;"> //================================================================  
2. //获取分页和排序信息：页大小，页码，排序方式，排序字段  
3. int pageRows, page;  
4.             pageRows = 10;  
5.             page = 1;  
6. string order, sort, oderby; order = sort = oderby = "";  
7. if (null != context.Request.QueryString["rows"])  
8. //获取前台传过来的每页显示数据的条数  
9. int.Parse(context.Request.QueryString["rows"].ToString().Trim());  
10.   
11.             }  
12. if (null != context.Request.QueryString["page"])  
13.             {  
14. //获取当前的页码  
15. int.Parse(context.Request.QueryString["page"].ToString().Trim());  
16.   
17.             }  
18. if (null != context.Request.QueryString["sort"])  
19. //排序方式  
20.   
21. "sort"].ToString().Trim();  
22.   
23.             }  
24. if (null != context.Request.QueryString["order"])  
25.             {  
26. //根据的字段  
27. "order"].ToString().Trim();  
28.   
29.             }  
30. </span>

调出分页查询数据B层的方法

[csharp] view plain copy

print ?

1. <span style="font-family:SimSun;font-size:18px;">//调用分页的GetList方法  
2.             DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);  
3. int count = scorebll.GetRecordCount(strWhere.ToString());//获取条数  
4. string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据  
5. //返回给前台页面  
6.             context.Response.End();</span>

D层中的方法：

根据查询条件，是否排序（以哪一列排序），调用数据库中查询符合条件的数据

[csharp] view plain copy

print ?

1. <span style="font-family:SimSun;font-size:18px;">/// <summary>  
2. /// 分页获取数据列表  
3. /// </summary>  
4. public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)  
5.         {  
6. new StringBuilder();  
7. "SELECT * FROM ( ");  
8. " SELECT ROW_NUMBER() OVER (");  
9. if (!string.IsNullOrEmpty(orderby.Trim()))  
10.             {  
11. "order by T." + orderby );  
12.             }  
13. else  
14.             {  
15. "order by T.ScoreStyleID desc");  
16.             }  
17. ")AS Row, T.*  from t_scoreRule T ");  
18. if (!string.IsNullOrEmpty(strWhere.Trim()))  
19.             {  
20. " WHERE " + strWhere);  
21.             }  
22. " ) TT");  
23. " WHERE TT.Row between {0} and {1}", startIndex, endIndex);  
24. return DbHelperSQL.Query(strSql.ToString());  
25.         }</span>

在实现的过程中，我们要记得前台加上这句话

[html] view plain copy

print ?

1. <span style="font-family:SimSun;font-size:18px;"> </span>

[javascript] view plain copy

print ?

1. <span style="font-family:SimSun;font-size:18px;">//增加查询参数，重新加载表格  
2. function reloadgrid() {  
3.   
4. //查询参数直接添加在queryParams中      
5.   
6. var queryParams = $('#tt').datagrid('options').queryParams;  
7.             getQueryParams(queryParams);  
8. '#tt').datagrid('options').queryParams = queryParams;//传递值  
9.   
10. "#tt").datagrid('reload');//重新加载table  
11.   
12.         }</span>

表格重新加载，因为这样才能拿到后面传来的数据，如果不加这个效果没出来（付出了时间的代价）。

jquery datatables 表格宽度_分页_02