JSP前台页面，如何实现表格分页？

1
直接调用action来处理分页,那么就需要每次点击
超链接
首页
尾页
上一页
下一页都要访问action类。
2
使用ajax来处理请求。

我们之前在后台学过一个分页控件但是那个控件可以用在后端,因为后台不用考虑美观等等;但是分页在前台我们常常会根据自己的要求作出不同的改变,这时候再用分页控件就不太好了,因为一旦用了这个控件,分页栏的样式就很难更改(别人写的,都封装完了),所以这种真正展示给用户看的页面的分页我们通常自己写,自己来控制样式

①:我们知道,分页需要后台的数据支持和前台的样式处理那么后台应该做什么呢我们知道,要想在后台查询数据,前台应该给后台传入两个参数,分别是当前页码和每页显示的记录数;我们在前台把这两个参数封装在搜索条件选项里,在后台接收;首先进行的就是需要进行判断,如果这两个的值是空的话,我们应该给他们设置默认值,这样就不会出现没有数据的情况了

②:进行了判断之后,我们需要加上两个条件,才能在dao层完成分页,其实就是在query中设置值,分别是设置setOffset:从第几条记录开始查询(这个数的值是:(当前页-1)每页显示的记录数)和setRows(每页显示的记录数)

③:我们加上了条件之后,返回的数据中就会有关于分页的数据,我们定义一个Map集合,把关于分页的数据放进这个Map集合中就可以了;我们需要的数据是:总页数:getTotalPage 总记录数:getTotalElements 每页显示的记录数据:getContent  最后再返回这个amp集合,这样前台就能获取后台的分页数据了

①:其实这个分页的难点就在前台js的controller中的处理,我后台的返回结果中有总记录数和总页数了,我们想要在前台显示多少页,怎么控制呢很简单,我们如果有起始页和末尾页,然后我们根据这两个值进行遍历,然后把每个值放进同一个数组中,我们在前台页面用ng-repeat遍历取值就行了

②:那么我们就想了,我们想在前台页面框显示几页呢这就有了两种情况:一种是奇数,我们让当前页的前面和后面有这个奇数减去1再除以2,这样就有了我们想要的页数;另一种是偶数,偶数比奇数麻烦一点,我们采用一个规则:前面少,后面多,比如10页,我们就让当前页前4后5;这样一来,我们只要判断一下我们想要显示的页数的奇偶性,然后就能算出起始页了,末尾页就等于起始页加上显示页数-1就行了

③:要注意的事:我们要考虑集中情况:一种是当前页的前面不足我们想要的页数,我们就让起始页等于1;一种是当前页的后面不足我们想要的页数,我们就要让末尾页数等于总页数(最大页数);还有就是我们在设置了末尾页后,要重新设值初始页(因为如果当前页数后面不足我们想要的,那么一开始计算的初始页就是不对的,就会导致显示的页数不足),为了处理这种情况,我们利用末尾页减去要显示的页数-1,然后判断是不是小于等于1,是就让初始页等于1,大于1就让初始页等于末尾页减去要显示的页数-1

④:我们在js的controller中设置一个构建分页数据的方法,方法的参数是我们想要显示的页数,然后根据传入的数进行判断,用三元运算式进行赋值;得出初始页和末尾页,然后遍历望数组中放入值就可以了;这样一来,我们想要修改显示的页数,修改传入的数就行了

⑤:再就是处理上一页\下一页和页面跳转的功能,我们需要在js的controller中创建一个方法,这个方法是根据页码查询分页数据的方法,这个方法中首先是要判断传入的页码是不是小于1或者大于总页数,如果是就打断程序;如果不是就给搜索条件中的当前页赋值,然后在调用查询方法,加载分页数据

⑥:最后就在页面中的上一页\下一页和跳转页面的上面,添加ng-click调用我们根据页码查询的方法;还有一个不要忘了,就是我们点击当前页也加上方法,里面传入的是当前页码;还有不要忘了在查询方法中,在查询业务执行之前,把当前页进行一下parseInt的转换,防止传到后台的是字符串

其实做完上面的这些 *** 作,基本的功能都已经实现了,不过有一些小得bug或者功能需要去优化

①:第一个需要优化的就是:跳转之后,当前页不刷新的问题这个问题就是我们在上一个搜索结果中跳转完页面,比如说是共有10页,我们跳到第九页,然后我们再搜索下一个,如果这个搜索结果不足九页就不会显示;换句话说就是开启新的搜索时,当前页没有刷新,我们需要保证在每次开始搜索之前初始化一下当前页,所以在body标签中ng-init里让当前页为1就行了

②:上一页和下一页的disabled属性:这个属性是为了让我们的上一页在第一页的时候显示固定的样式,并且不能使用,同理下一页是在最后一页时失效;想要到达这个效果,我们控制上一页和下一页的disabled的出现时机就行了,我们用{{条件'disabled':''}}这样就能解决这个问题了

③:省略号的显示:如果起始页前面还有页码就显示省略号,没有就不显示;末尾页后面如果没有页码了,就不显示,还有就显示省略号为了好理解,我们在js的controller中创建两个变量,这两个变量开始的时候都是true,当起始页<=1或者末尾页>总页数时,改变对应的变量为false;然后在页面中的省略号位置,用ng-if调用对应的变量就行了

用控件的
在前台放一个DataList控件
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
这里放重复的内容
</ItemTemplate>
</asp:DataList>
<div id="pages">当前页次：<asp:Label ID="labPage" runat="server" Text="1"></asp:Label>/<asp:Label ID="labBackPage" runat="server"></asp:Label>
<a id="btnOne" runat="server"><img src="/images/back_startgif" width="22" height="11" id="lnkbtnOne" runat="server" alt="首页" /></a>
<a id="btnUp" runat="server"><img src="/images/backgif" width="16" height="11" id="lnkbtnUp" runat="server" alt="上一页" /></a>
<a id="btnNext" runat="server"><img src="/images/nextgif" width="16" height="11" id="lnkbtnNext" runat="server" alt="下一页" /></a>
<a id="btnBack" runat="server"><img src="/images/next_endgif" width="22" height="11" id="lnkbtnBack" runat="server" alt="尾页" /></a>
</div>
在cs后台中
protected void bind()
{
int curpage = ConvertToInt32(RequestQueryString["page"]);
if (curpage == null || curpage == 0) { curpage = 1; }
//使用PagedDataSource类实现DataList控件的分页功能
PagedDataSource ps = new PagedDataSource();
string sql = "select id,title,date from [news] where title<>''";
if (classid1 != null && classid1 != 0) { sql += " and classid=" + classid1; }
if (keyword1 != null) { sql += " and title like '%" + keyword1 + "%'"; }
sql += " order by date desc";
//获取数据集
DataSet ds = constrGetDataSet(sql, "CP");
psDataSource = dsTables["CP"]DefaultView;
//是否可以分页
psAllowPaging = true;
//显示的数量
psPageSize = 20;
//取得当前页的页码
psCurrentPageIndex = curpage - 1;
thislnkbtnUpSrc = "/images/backgif";
thislnkbtnNextSrc = "/images/nextgif";
thislnkbtnBackSrc = "/images/next_endgif";
thislnkbtnOneSrc = "/images/back_startgif";
thisbtnOneHRef = "/Newsaspxclassid=" + classid1 + "&keyword=" + ServerUrlEncode(keyword1) + "&page=1";
thisbtnUpHRef = "/Newsaspxclassid=" + classid1 + "&keyword=" + ServerUrlEncode(keyword1) + "&page=" + (curpage - 1);
thisbtnNextHRef = "/Newsaspxclassid=" + classid1 + "&keyword=" + ServerUrlEncode(keyword1) + "&page=" + (curpage + 1);
thisbtnBackHRef = "/Newsaspxclassid=" + classid1 + "&keyword=" + ServerUrlEncode(keyword1) + "&page=" + psPageCount;
if (curpage == 1)
{
//不显示第一页按钮
thislnkbtnOneSrc = "/images/back_start_nogif";
thisbtnOneHRef = "";
//不显示上一页按钮
thislnkbtnUpSrc = "/images/back_nogif";
thisbtnUpHRef = "";
}
if (curpage == psPageCount)
{
//不显示下一页
thislnkbtnNextSrc = "/images/next_nogif";
thisbtnNextHRef = "";
//不显示最后一页
thislnkbtnBackSrc = "/images/next_end_nogif";
thisbtnBackHRef = "";
}
//显示分页数量
thislabBackPageText = ConvertToString(psPageCount);
//绑定DataList控件
thisDataList1DataSource = ps;
thisDataList1DataKeyField = "ID";
thisDataList1DataBind();
}

---