bootstrap分页插件实例演示

最新推荐文章于 2023-10-21 17:50:18 发布

flyingpig2016

最新推荐文章于 2023-10-21 17:50:18 发布

阅读量1.6k

点赞数 1

分类专栏： javascript js插件 bootstrap 文章标签： bootstrap 插件分页 JavaScript

本文链接：https://blog.csdn.net/flyingpig2016/article/details/52971403

版权

javascript 同时被 3 个专栏收录

49 篇文章 2 订阅

订阅专栏

js插件

5 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
    <link href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/nifty.min.css" rel="stylesheet">

    <!--Font Awesome [ OPTIONAL ]-->
    <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!--Bootstrap Select [ OPTIONAL ]-->
    <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <link href="js/kkpager-master/src/kkpager_blue.css" rel="stylesheet">

</head>

<body>
    <!--Data Table-->
    <!--===================================================-->
    <div class="panel-body">
        <div class="pad-btm form-inline">
            <div class="row">
                <div class="col-sm-6 table-toolbar-left">
                    <button id="demo-btn-addrow" class="btn btn-purple btn-labeled fa fa-plus">Add</button>
                    <button class="btn btn-default"><i class="fa fa-print"></i></button>
                    <div class="btn-group">
                        <button class="btn btn-default"><i class="fa fa-exclamation-circle"></i></button>
                        <button class="btn btn-default"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
                <div class="col-sm-6 table-toolbar-right">
                    <div class="form-group">
                        <input id="demo-input-search2" type="text" placeholder="Search" class="form-control" autocomplete="off">
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-default"><i class="fa fa fa-cloud-download"></i></button>
                        <div class="btn-group">
                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                <i class="fa fa-cog"></i>
                                <span class="caret"></span>
                            </button>
                            <ul role="menu" class="dropdown-menu dropdown-menu-right">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th class="text-center">Current</th>
                        <th>ID</th>
                        <th>ServerId</th>
                        <th>BusinessId</th>
                        <th>Days</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <!--
                    <tr>
                        <td><a class="btn-link" href="#"> Order #53431</a></td>
                        <td>Steve N. Horton</td>
                        <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 22, 2014</span></td>
                        <td>$45.00</td>
                        <td>
                            <div class="label label-table label-success">Paid</div>
                        </td>
                        <td>-</td>
                    </tr>
-->
                </tbody>
            </table>
            <div style="float:right;">
                <div id="kkpager"></div>
            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--End Data Table-->
    <input type="text" id="num" value="">
    <input type="button" id="flush" value="点击刷新">
</body>
</html>
<!--jQuery [ REQUIRED ]-->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/kkpager-master/src/kkpager.js"></script>
<script src="js/table.js"></script>

下面是js代码：

$(function() {
    $('#flush').click(function() {
        startTime = $('#num').val();       //获取文本框里的内容
        console.log('2016' + startTime)     //输出
        getData()
    })

    function getData(currentPage) {
        console.log('https://www.12nav.com/interface/busi.php?action=range&start=2016'+startTime + '&stop=20160830&sid=2&pid=' + currentPage + '&size=10&bid=94');
        $.ajax({
            async: true,
            type: 'POST',
            url: "https://www.12nav.com/interface/busi.php",
            data: "action=range&start=2016" + startTime + "&stop=20160830&sid=2&pid="+currentPage+"&size=10&bid=94",
            success: function(result4) {
                $('#tableBody').empty();
                for (key in result4.Data) {
                    $('#tableBody').prepend('<tr><td>' + result4.Current + '</td><td>' + result4.Data[key].ID + '</td><td>' + result4.Data[key].ServerId + '</td><td>' + result4.Data[key].BusinessId + '</td><td>' + result4.Data[key].Days + '</td><td>' + result4.Data[key].Total + '</td></tr>');
                }
                setpage(result4.Count,result4.Current)
            },
            error: function() {
                alert()
            }
        })
    }
    //  分页开始
    //==============================================
    function setpage(totalPage,currentPage) {
        // var total = parseInt(totalPage)
        // var pageNo = getParameter('pno');
        var pageNo = currentPage;
        if (!pageNo) {
            pageNo = 1;
        }
        //生成分页
        //有些参数是可选的，比如lang，若不传有默认值
        $("#kkpager").empty();
        kkpager.total = totalPage;
        // kkpager.totalRecorders = kkpager;
        kkpager.generPageHtml({
            pno: pageNo,
            // total: totalPage, //全部页数
            // totalRecords: totalPage,     //全部数据条数（可选）
            // hrefFormer: 'pager_test', //链接前部
            // hrefLatter: '.html', //链接尾部
            // getLink: function(n) {
            //     return this.hrefFormer + this.hrefLatter + "?pno=" + n;
            // },
            lang: {
                firstPageText: '首页',
                firstPageTipText: '首页',
                lastPageText: '尾页',
                lastPageTipText: '尾页',
                prePageText: '上一页',
                prePageTipText: '上一页',
                nextPageText: '下一页',
                nextPageTipText: '下一页',
                totalPageBeforeText: '共',
                totalPageAfterText: '页',
                currPageBeforeText: '当前第',
                currPageAfterText: '页',
                totalInfoSplitStr: '/',
                totalRecordsBeforeText: '共',
                totalRecordsAfterText: '条数据',
                gopageBeforeText: ' 转到',
                gopageButtonOkText: '确定',
                gopageAfterText: '页',
                buttonTipBeforeText: '第',
                buttonTipAfterText: '页'
            },
            mode: 'click', //默认值是link，可选link或者click
            click: function(n) {
                this.selectPage(n);
                getData(n)
                return false;
            }
        },true);
    }
    //==========================================================
    //  分页结束

})

<script src="js/kkpager-master/src/kkpager.js"></script>

flyingpig2016

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap分页插件实例演示

<!DOCTYPE html><html lang="en"><meta charset="utf-8"><head> <link href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet"> <link rel="stylesheet" href
复制链接

扫一扫