您的位置：首页 > Web前端 > JQuery

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

2014-12-09 19:18 549 查看

1.前台

<html xmlns="http://www.w3.org/1999/xhtml">

<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="搜索" onclick="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;

}

}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： pagination jquery 分页前端搜索

相关文章推荐

新的分享

章节导航