zoukankan      html  css  js  c++  java
  • 前台分页控件用法

    <head>
    <meta charset="utf-8" />
    <link href="content/pagination.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/pagination.js"></script>
    <title>显示</title>

    <script>

    $(function () {
    var where = $("#where").val();
    $.ajax({
    url: "http://localhost:62103/api/show",
    data: { where: where, pageIndex: 1, pageSize: 2 },
    dataType: "json",
    type: "get",
    success: function (res) {
    pageShow(res.Falg);
    }
    })
    })
    //拼接显示方法
    function Show(pageNumber, jq) {
    var where = $("#where").val();
    $.ajax({
    url: "http://localhost:62103/api/show",
    data: { where: where, pageIndex: (pageNumber+1), pageSize: 2 },
    dataType: "json",
    type: "get",
    success: function (res) {

    var str = "";
    $(res.TT).each(function (i, n) {

    str += "<tr>";
    str += "<td>" + n.Sid + "</td>";
    str += "<td>" + n.Sname + "</td>";
    str += "<td>" + n.Ssex + "</td>";
    str += "<td>" + n.Sage + "</td>";
    str += "<td>" + n.Smajor + "</td>";
    str += "</tr>";
    })
    $("#tb tr:gt(0)").empty();
    $("#tb").append(str);
    }
    })
    }
    //分页的方法
    function pageShow(total) {
    $("#pagination").pagination(total, {
    //每页显示的值
    items_per_page: 2,
    //省略号前显示的个数
    num_display_entries: 2,
    //省略号后显示的个数
    num_edge_entries: 2,
    prev_text: "首页",
    next_text: "尾页",
    //回调一个函数
    callback: Show,
    })
    }
    //查询方法
    function chaxun() {
    var where = $("#where").val();
    $.ajax({
    url: "http://localhost:62103/api/show",
    data: { where: where ,pageIndex: 1, pageSize: 2 },
    dataType: "json",
    type: "get",
    success: function (res) {
    pageShow(res.Falg);
    }
    })
    }
    </script>

    </head>
    <body>
    <input id="where" type="text" /><input id="chaxun" onclick="chaxun()" type="button" value="查询" />
    <table id="tb">
    <tr>
    <td>编号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>专业</td>
    </tr>

    </table>
    <div id="pagination" class="pagination">

    </div>

    </body>

  • 相关阅读:
    VB C# 语法对比图 (代码实例)
    改进了的一个邮件发送类
    什么时候应该使用 ==?什么时候应该使用 Equals?
    c#写的贪吃蛇小游戏
    七招制胜ASP.NET应用程序开发
    SQL Server开发人员应聘常被问的问题汇总
    DataTable中数据记录的统计
    ASP.NET中数据库数据导入Excel并打印
    在.NET中得到计算机硬件信息的一些功能
    C#.NET 中的类型转换
  • 原文地址:https://www.cnblogs.com/kongjie/p/13083309.html
Copyright © 2011-2022 走看看