Jquery的pagination前端分页技术，带查询功能

最新推荐文章于 2024-07-24 20:44:30 发布

wanhui_0202

最新推荐文章于 2024-07-24 20:44:30 发布

阅读量8.3k

点赞数

分类专栏：科普文文章标签： pagination jquery 分页前端搜索

本文链接：https://blog.csdn.net/wanhui_0202/article/details/41827707

版权

科普文专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.前台

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>选择出差单</title>
<script src="../js/jquery-1.4.1.min.js"></script>
<script src="../js/tablecloth.js"></script>
<script src="../js/jquery.pagination.js"></script>
<link href="../css/tablecloth.css" rel="stylesheet" />
<link href="../css/pagination.css" rel="stylesheet" />
<script type="text/javascript">
var pageIndex=0 ; //初始页索引
var pageSize =5; //每页数据条数
var totalSize; //设置默认总数据条数

$(function () {
totalSize =<%=rowNum%>;//绑定后台字段
InitTable(0);
//pagination的第一个参数为：最大数据量，即为数据库中的数据条数
$("#Pagination").pagination(totalSize, {//显示底端的页码
callback: PageCallback,
pre_text: '上一页',
net_text: '下一页',
items_per_page: pageSize,//显示条数
num_display_entries: 3, //连续分页主体部分分页条目数
current_page: pageIndex,//当前页索引
num_edge_entries: 2
});
});
//定义回调函数
function PageCallback(index, jq) {
InitTable(index);
};
//定义初始函数
function InitTable(pageIndex) {
$.ajax({
type: "POST",
dataType: "text",
url: "../handle/PageHandler.ashx",//提交到后台处理文件
data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "&condition=" + $("#condition").val()+"&tableName= Journey",//loation 参数值
success: function (data) {
$("#Result tr:gt(0)").remove();//移除第二行以下的tr
$("#Result").append(data); //将后台传过来的数据加载到table中
}
});
};
//查询
function search(){
$.getJSON("../handle/GetRowNum.ashx",{"condition":$("#condition").val()},function (arg1){
pageIndex=0;
$("#Pagination").pagination(arg1, {//显示底端的页码
callback: PageCallback,
pre_text: '上一页',
net_text: '下一页',
items_per_page: pageSize,//显示条数
num_display_entries: 3, //连续分页主体部分分页条目数
current_page: pageIndex,//当前页索引
num_edge_entries: 2
});
});
};
</script>
</head>
<body>
<div class="main">
<form id="form1" runat="server">
<div class="top">
<%--出差单号：<asp:TextBox ID="condition" runat="server"></asp:TextBox>  <asp:Button ID="search" runat="server" Text="搜索" OnClick="search_Click" /> --%>
出差单号：<input type="text" id="condition" /> <input type="button" value="搜索" οnclick="search()" />
</div>
<div class="data">
<table id="Result" style="margin:0px; padding:0px;">
<tr>
<th>选择</th>
<th>编号</th>
<th>出差单号</th>
<th>出差开始日期</th>
<th>出差结束日期</th>
<th>出差行程</th>
<th>出差人员</th>
<th>出差事由</th>
</tr>
</table>
<div id="Pagination"></div>
</div>
</form>
</div>
</body>

</html>

2.后台

public int rowNum = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rowNum = getRowsNum();
}
}
/// <summary>
/// 查询数据的总条数
/// </summary>
/// <param name="where">查询条件</param>
protected int getRowsNum()
{
string sql = string.Format("select count(0) from {0} ", "Journey");
object i = SqlHelper.GetOneData(sql, CommandType.Text);
if (i != null)
{
rowNum = (int)i;
return rowNum;
}
else
{
return 0;
}
}

///特别说明需要一定的计算机编程基础。查询的后台处理代码，不上传了。与初始化数据绑定的操作基本类似，编程者可以根据自己的情况查看。附件中有：源文件可以选择下载。

wanhui_0202

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Jquery的pagination前端分页技术，带查询功能

1.前台选择出差单 var pageIndex=0 ; //初始页索引 var pageSize =5; //每页数据条数 var totalSize; //设置默认总数据条数 $(function () {
复制链接

扫一扫