对异步刷新获取的数据排序、分页

tuo_bing 2010-05-12 04:15:52
系统需求:根据用户选择的时间段,得到销售的数据记录,重新更改时间,不刷新整个页面,获取新的数据填充到 Table
中,Table 中的数据可以点击表头排序,数据量大的话,可以分页。

本人现在用的方法是 :
(一)提交表单用 jQuery

function listData(data){
var str ;
var mytable = $("#dayTab");
$("table.tablesorter tbody tr").each(function(){
$(this).remove();
});

$.each(json,function(i,turnoverReport){
str = "<tr><td>"+turnoverReport.tradeDate+"</td><td>"+turnoverReport.clientNum+"</td><td>"+turnoverReport.returnedNum+"</td><td>"+turnoverReport.productNum+"</td><td>"+turnoverReport.weight+"</td><td>"+turnoverReport.turnover+"</td><td>"+turnoverReport.price+"</td>";

mytable.append(str);
});

$(".tablesorter").tablesorter();
}


,前台 Table 的排序用 tablesort
$("#dayTab").tablesorter();

问题: 对于用 jQuery 重构的表 ,tablesort的排序功能不予以支持(重新提交后,点击表头不能排序)

(二) 使用 displaytag
前台 jsp 源码:

<display:table id="element" name="saleItemsList" requestURI="day_turnover2.action" pagesize="15" export="true" size="resultSize" partialList="true">
<display:column property="commodityNo" title="商品编号" sortable="true" headerClass="sortable" ></display:column>
<display:column property="name" title="商品名称"></display:column>
<display:column property="price" title="价格" sortable="true" headerClass="sortable" ></display:column>
<display:column property="quantity" title="数量"></display:column>
<display:column property="amount" title="总额" sortable="true" headerClass="sortable" ></display:column>
<display:column property="saleDate" title="出售日期"></display:column>

</display:table>

参考资料:http://hi.baidu.com/seashell752/blog/item/af5ac50863c890930b7b8254.html
使用 displaytag 的好处就是它本身就自带了分页和排序,并且还有导出的功能
问题: 点击表头排序,分页 等待的时间太长 (点击一次"排序"或者"下一页" 要 4-5 s, 用SQL查询数据,时间不到 1s)


本人对 jQuery 学习时间不长, displaytag 也是在摸索中前进,希望有高人指点下,或者请有经验的前辈分享下处理过类似问题的成功的方法,谢谢大家 。。。
...全文
859 35 打赏 收藏 转发到动态 举报
写回复
用AI写文章
35 条回复
切换为时间正序
请发表友善的回复…
发表回复
allxiang 2010-10-16
  • 打赏
  • 举报
回复
在display:table 里增加requestURI="你要跳转到的页面" 如:requestURI="test1.jsp" 或requestURI="Servlet?action=find"
「已注销」 2010-06-18
  • 打赏
  • 举报
回复
留名 学习
didiaodezhu 2010-05-14
  • 打赏
  • 举报
回复
EXTJS 的grid可以滿足你的需要

根据用户选择的时间段,
得到销售的数据记录,
重新更改时间, //可以將新的時間當做參數傳給後臺 baseParams 或者store.reload
不刷新整个页面,获取新的数据填充到 Table中, //EXT用ajax的 用store.reload 不刷新頁面 重新加載
Table 中的数据可以点击表头排序 //grid的cm自帶這個屬性 你將cm的sortable: true 就可以排序
数据量大的话,可以分页。 //grid自帶分頁控件


蹭分蹭分
huangchbao 2010-05-14
  • 打赏
  • 举报
回复
为你的<td>标头添加点击事件你应该会吧
当他点击的时候你写一个方法
取得这个td下面的内容
进行判断如果小的话,去数据库里面反序查询,如果大的话,正序
function top(){
//到servlet上去处理逻辑,查询出来你想要的数据,在查询回来的时候设置好数据分页的形式,最好以JSON数据返回 order by id desc,
//清空原有信息
//添加新的信息
$.each(function(i,data){
$("table").append("<tr><td>"+data.id+"<td><td>"+data.name+"</td><tr>");
})
}
  • 打赏
  • 举报
回复
显示数据条数少的,自己用js写个排序得了。
显示数据条数多的,最好还是提交服务器,在数据库里排好了再显示出来吧!
tuo_bing 2010-05-14
  • 打赏
  • 举报
回复

谢谢以上各位的回帖, EXTJS 没有用过,现在项目开发,也没有时间去学习了,等项目完结,有时间一定要去看看, 各位提到的flexigrid ,在网上了解了一下,应该是可以解决这样的问题,空闲的时候确实值得一看 。 由于项目本身居多的限定,暂时用如下解决方式 :

------------------------------------------------------------------------------------
1. tablesort 对 jQuery返回的数据不能排序问题 :
其实 tablesort 有这方面的功能,只是开始没有仔细看它的 doc 文档 (), 在 jQuery 重构数据后,添加 :
$("#dayTab").trigger("update");
便可以排序,至于其中原由暂时没有去深入研究,有兴趣的朋友可以看看。

------------------------------------------------------------------------------------
2. 对于异步请求获取到的数据分页:
由于数据量并不是很大,所以采取的方式是 将所有数据查询并存储,然后用 js 来对其进行分页 ,采用 jquery.pagination.js 对于大数量的数据 ,我想用上述的 flexigrid 是不错的选择 。

------------------------------------------------------------------------------------


当然大家如果还有更好的方式来解决这样的问题,可以继续在这里跟大家分享 。
  • 打赏
  • 举报
回复
没怎么用LZ 的方法写,学习下!
ffgg4453 2010-05-14
  • 打赏
  • 举报
回复
我...........来接分的 呵呵
只用js写过分页 不清楚排序...........displaytag也没用过......
henoy 2010-05-14
  • 打赏
  • 举报
回复
...
meteoraincheng 2010-05-14
  • 打赏
  • 举报
回复
此贴要沉了,顶个。。问问为什么不用分页框架,如page-taglib什么的。。
JavaAlpha 2010-05-13
  • 打赏
  • 举报
回复
兄弟 没大明白你的意思啊?
zhouxuegangjava163 2010-05-13
  • 打赏
  • 举报
回复
给你顶下吧,这年头不愿意看帖子了。
crazylaa 2010-05-13
  • 打赏
  • 举报
回复
这种不喜欢第3方的。一般大数据量带排序的多表联查,都是自己ajax调分页存储过程实现。
tfish2014 2010-05-13
  • 打赏
  • 举报
回复
好贴 收藏!
zhangyanhu602 2010-05-13
  • 打赏
  • 举报
回复
使flexigrid~~~
blue44sky 2010-05-13
  • 打赏
  • 举报
回复
我一般用flexigrid,这些问题它都帮你解决了
tuerqizhou 2010-05-13
  • 打赏
  • 举报
回复
var StatuTabPagingToolbar = new Ext.PagingToolbar({// ???????
store : StatuTabDs,
pageSize : 20,
// 显示右下角信息
displayInfo : true,
displayMsg : '当前记录 {0} -- {1} 条 共 {2} 条记录',
prevText : "上一页",
nextText : "下一页",
refreshText : "刷新",
lastText : "最后页",
firstText : "第一页",
beforePageText : "当前页",
afterPageText : "共{0}页",
emptyMsg : "没有数据" });
tuerqizhou 2010-05-13
  • 打赏
  • 举报
回复
其实在 extjs框架 里面似乎实现点很简单
pengqing1024872845 2010-05-13
  • 打赏
  • 举报
回复
用SQL语句实现分页和排序功能:
string sql = "select top " + pagesize + " * from 表名 where 字段ID not in " +
"(select top " + (pageindex - 1) * pagesize + " 字段ID from 表名 order by 字段ID)" +
" order by 字段ID"
pagesize页的显示的大小
pageindex页的页数
fanhai2010 2010-05-13
  • 打赏
  • 举报
回复
自己定义一个标签,该标签作用就是对传进来的数据进行排序,要怎么进行排序也可以自己写算法实现呀。
加载更多回复(15)

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧