dapper分页HTML

最新推荐文章于 2024-08-04 02:40:53 发布

LEyeOpener

最新推荐文章于 2024-08-04 02:40:53 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/l858797681/article/details/106650076

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <link href="Content/pagination.css" rel="stylesheet" />
    <script src="Scripts/pagination.js"></script>
    <script>
        $(function () {
            //初次加载显示分页
            $.ajax({
                url: "http://localhost:49586/api/Page",
                data: {PageIndex:1},
                type: "get",
                dataType: "json",
                success: function (result) {
                    Pager(result.totalCount);
                }
            })
        })
        function Pager(index_Pager) {
            $("#pagination").pagination(index_Pager, {
                //省略号后面显示的个数
                num_edge_entries: 1,
                //省略号前面显示的个数
                num_display_entries: 1,
                prev_text: "上一页",
                next_text: "下一页",
                callback: CallPagerData,
                //每页显示的条数
                items_per_page: 2
            });
        }
        function CallPagerData(page_index, jq) {
            $.ajax({
                url: "http://localhost:49586/api/Page",
                data: { PageIndex: page_index+1 },
                type: "get",
                dataType: "json",
                success: function (result) {
                    ShowList(result.data);
                }

            })
        }
        function ShowList(result) {
            $("#list").empty();
            var str = "";
            $(result).each(function (i, n) {
                str += "<tr>" +
                    "<td>"+n.Id+"</td>" +
                    "<td>"+n.Dtitle+"</td>" +
                    "<td>"+n.Dname+"</td>" +
                    "<td>"+n.SubTime+"</td>" +
                    "<td>" + n.Dinfo + "</td>" +
                    "<td><input id='Button1' type='button' value='修改' οnclick='edit()'/></td>" +
                    "</tr>";
            })
            $("#list").append(str);
        }
        function Export() {
            window.location.href = 'http://localhost:49586/api/Export';
        }
        function edit() {
            location.href = '/Edit.html?id=' + "王少帅";
        }
    </script>
</head>
<body>
    <div style="width:800px;margin:auto">
        <input id="Button1" type="button" value="导出" class="btn btn-primary" οnclick="Export()" />

        <table class="table table-bordered">
            <tr>
                <td>序号</td>
                <td>日志标题</td>
                <td>日志类型</td>
                <td>发布时间</td>
                <td>日志内容</td>
                <td>操作</td>
            </tr>
            <tbody id="list"></tbody>
        </table>
    </div>
    <div style="width:500px;margin-left:615px" class="pagination" id="pagination">