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

原创 2014年12月09日 19:18:56

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> &nbsp;<asp:Button ID="search" runat="server" Text="搜索" OnClick="search_Click" /> --%>
            出差单号:<input type="text" id="condition" />&nbsp;<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;
            }
        }

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

用jquery datatables实现页面分页,前端分页,后端分页

这两天搞了点网页上的分页,真的是搞得欲仙欲死,现在也只能说是搞了个入门的水平吧,现在就来写下这几天的收获。      用的是datatables的框架,先来个框架的地址:https://datata...

一个简单的jquery前端分页

jquery前端分页效果的实现

JQuery动态查询并分页

商品录入及上下架管理_商品管理 "> "> $(function(){ var showStatus = $("#showStatus").val(); if(showStatus == '...

jquery.pagination实现分页查询功能

资源下载 1)前台代码 @{ Layout = null; } Index var PageSize =...

jquery分页显示

我们在显示文章列表的时候,通常需要分页显示。 一种方式是通过SQL查询的limit进行分页,即只查询该页面的数据。 另外一种方式是查询出所有的数据,传递给前段,然后用jquery控制只显示我们想看...
  • koastal
  • koastal
  • 2016年06月27日 21:30
  • 823

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

十三.通过pagination对页面进行分页

 如果表格数据量过多,需要对表格进行分页处理。而Django自带了分页机制,具体可以参见https://docs.djangoproject.com/en/1.9/top...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery分页插件pagination教程

pagination使用起来非常的方便。 第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css) 第二步:将分页条容器写到页面里(固定代码)...

jquery_pagination分页

jquery pagination的使用后台的主要任务是获取总记录数和列表数据,剩下的分页功能可以交给前台来做就可以了,感觉jquery pagination(http://github.com/gb...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery的pagination前端分页技术,带查询功能
举报原因:
原因补充:

(最多只允许输入30个字)