zoukankan      html  css  js  c++  java
  • mvc 显示 分页


    @{
        Layout = null;
    }
    <h2>分页</h2>
    <link href="~/Content/pagination.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/pagination.js"></script>
    <div>
        <table id="tb"class=" table table-bordered">
            <tr>
               
                <td>Id</td>
                <td>编号</td>
                <td>日志类型</td>
                <td>日志标题</td>
                <td>发布人</td>
                <td>发布时间</td>
                <td>执行时间</td>
                <td>发布内容</td>
                <td>操作</td>
            </tr>
        </table>
        <div id="pagination" class="pagination">
        </div>
    </div>
    <script>
        $(function () {
            ShowFenYe();
        });
        function ShowFenYe() {
            $.ajax({
                url: "http://localhost:51251/api/pager?pagesize=2&pageindex=1",
                dataType: "json",
                type: "get",
                success: function (result) {
                    Page(result.total);
                }
            });
        }
        function Page(total) {
            $("#pagination").pagination(total,{
                num_edge_entries: 2,
                //省略号前显示多少
                num_display_entries: 5,
                prev_text: "上一页",
                next_text: "下一页",
                //回调一个函数
                callback: CallpagerData,
                //每页显示的值
                items_per_page: 2
            });
        }
        function CallpagerData(page_Index,jq) {
            $.ajax({
                url: "http://localhost:51251/api/pager?pagesize=2&pageindex=" + (page_Index+1),
                dataType: "json",
                type: "get",
                success: function (result) {
                    showList(result.data);
                }
            });
        }
       
        function showList(result) {
            var str = "";
            $.each(result, function (i,n) {
                str += "<tr><td>"+n.ID+"</td>";
                str += "<td>" + n.LNumber + "</td>";
                str += "<td>" + n.LogTypeName + "</td>";
                str += "<td>" + n.Title + "</td>";
                str += "<td>" + n.Issuer + "</td>";
                str += "<td>" + n.CreateTime + "</td>";
                str += "<td>" + n.ExeTime + "</td>";
                str += "<td>" + n.Context + "</td>";
                str += "<td><a href='javascript:Delete(" + n.ID + ")'>删除</a><a href='javascript:Update(" + n.ID + ")'>修改</a></td>";
            });
            $("#tb tr:gt(0)").empty()
            $("#tb").append(str);
        }
        function Delete(ID) {
            $.ajax({
                url: "http://localhost:51251/api/Delete ",
                data: {PID:ID},
                dataType: "text",
                type: "post",
                success: function (result) {
                    ShowFenYe();
                }
            });
        }
        function Update(ID) {
            location.href = 'http://localhost:52837/Log/Update?ID=' + ID + '';
        };
    </script>
  • 相关阅读:
    Python使用struct处理二进制
    ProtoBuf与Python结合使用初步
    智能指针shared_ptr的用法
    C++模板
    mac 安装protobuf,并编译为java,c++,python
    java的HashCode方法
    JVM的内存结构
    HashSet与TreeSet的比较
    面向对象的特征有哪些方面?
    Collection与Collections的区别是什么?
  • 原文地址:https://www.cnblogs.com/GuoLianSheng/p/13261189.html
Copyright © 2011-2022 走看看