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;
            }
        }

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wanhui_0202/article/details/41827707

jquery_pagination分页

jquery pagination的使用后台的主要任务是获取总记录数和列表数据,剩下的分页功能可以交给前台来做就可以了,感觉jquery pagination(http://github.com/gb...
  • xiejx618
  • xiejx618
  • 2015-08-05 16:33:19
  • 10009

用JS实现前端分页的简单方法

昨天朋友问我,后台传过来的数据在前端分页显示怎么做。 我也只做过后台分页查询前端显示的方法,没有做过后台不分页而在前端分页的形式。 于是研究了下后台返回全部数据,在前端将数据分页显示的办法。自己研究再...
  • liuyeshennai
  • liuyeshennai
  • 2016-03-03 23:39:27
  • 34027

一个简单的jquery前端分页

jquery前端分页效果的实现
  • kwen_Lee
  • kwen_Lee
  • 2016-11-18 10:05:01
  • 2411

使用jquery实现的分页

  • 2014年07月22日 16:39
  • 22KB
  • 下载

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

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

关于jquery.datatable插件从数据库动态读取数据-动态分页

在上篇随笔中所提到的数据插入方法,是将所有数据一次性读出并插入表格,只能针对数据量小的操作。 本篇随笔记录的是datatable插件服务器端分页读取数据的方法。 一、分页 分页的基本...
  • lisky119
  • lisky119
  • 2014-05-15 12:42:46
  • 26374

从后台一次查询所有数据,在前端用js进行分页处理,不再次走数据库

此需求是做中车项目时的一次需求,但后来没有完成这个需求,本人一冲动就查阅了很多资料,最终从众多方案中记录了这个方案,与其他人共勉。 分页插件是:jquery.pagination.js,pagina...
  • zhangbingtao2011
  • zhangbingtao2011
  • 2017-04-19 19:52:40
  • 4288

简易前端分页组件

/** * 简易分页控件JS (自写) * *准备工作: * (1)引入page.css样式文件; * (2)引入page.js脚本文件; * (3)以及Jquery库文件...
  • ThinkingLink
  • ThinkingLink
  • 2015-08-31 17:37:10
  • 1825

jQuery插件:一个仿百度搜索分页插件

基于jquery实现的一个仿百度搜索分页插件,风格可以自己设置,推荐使用bootstrap配合使用。先贴代码:(function ($) { $.fn.pagination = functio...
  • peakchen_90
  • peakchen_90
  • 2016-08-11 22:17:55
  • 1774

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

 如果表格数据量过多,需要对表格进行分页处理。而Django自带了分页机制,具体可以参见https://docs.djangoproject.com/en/1.9/top...
  • alex_chen_16
  • alex_chen_16
  • 2016-06-14 21:19:20
  • 4254
收藏助手
不良信息举报
您举报文章:Jquery的pagination前端分页技术,带查询功能
举报原因:
原因补充:

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