【随堂笔记】BootStrip分页查询

原创 萧瑟  2017-06-02 11:15:37  阅读 626 次 评论 0 条

今天上BootStrip分页数据查询,就随手把笔记写出了以免忘记

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="CSS/bootstrap.min.css" rel="stylesheet" />
    <script src="JS/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            //getJson 提交数据 
            $.getJSON("Page.ashx", { "page": 1 }, function (data) {
                addpages(data);//列表函数
                addpageList(data);//分页函数
            });

        });
        //加载列表信息
        function addpageList(pdata) {
            $("#pagesList").html("");
            var pageList = "<div class='list-group'>";
            $.each(pdata.row, function (i, item) {
                pageList += "<a href='#' class='list-group-item' onclick=pageListActive(this) >";
                pageList += "<h4 class='list-group-item-heading'>" + item.MusicName + "</h4>";
                pageList += "<p class='list-group-item-text'>" + item.name + "</p>";
                pageList += "<p class='list-group-item-text'>" + item.typeName + "</p>";
                pageList += "<p class='list-group-item-text'>" + item.faXingTime + "</p>";
            });
            pageList += "</a><div>";
            $("#pagesList").append(pageList);

        }
        //选中列表数据
        function pageListActive(item) {
            $(item).siblings().removeClass("active");
            $(item).addClass("active");
        };
        //选中分页数据
        function pagesActive(item) {

            $(item).siblings().removeClass("active");
            $(item).addClass("active");
            var page = $(item).find("a").html();
            $.getJSON("Page.ashx",{"page":page},function(data){
                addpageList(data);
            });
        };
        //加载分页列表
        function addpages(pdata) {
            
            var pages = "<ul class='pagination'>";
            pages += "<li onclick=pagesActive(this) ><a href='#' >&laquo;</a></li>"
            for (var i = 1; i <= pdata.pages; i++) {
                pages += "<li onclick=pagesActive(this) ><a href='#'>" + i + "</a></li>"
            }
            pages += "<li onclick=pagesActive(this)><a href='#'>&raquo;</a></li></ul>"
            $("#pages").append(pages);
        };
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12" id="pagesList"></div>
        </div>
        <div class="row">
            <div id="pages" style="width: 500px" class="center-block"></div>
        </div>
    </div>
</body>
</html>


就这么多

本文地址:https://www.xsyrz.cn/BootStrip06-paging.html
版权声明:本文为原创文章,版权归 萧瑟 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?