bootstrap分页插件实例演示


<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">

    
    <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    
    <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <link href="js/kkpager-master/src/kkpager_blue.css" rel="stylesheet">

head>

<body>
    
    
    <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">Addbutton>
                    <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="#">Actiona>li>
                                <li><a href="#">Another actiona>li>
                                <li><a href="#">Something else herea>li>
                                <li class="divider">li>
                                <li><a href="#">Separated linka>li>
                            ul>
                        div>
                    div>
                div>
            div>
        div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th class="text-center">Currentth>
                        <th>IDth>
                        <th>ServerIdth>
                        <th>BusinessIdth>
                        <th>Daysth>
                        <th>Totalth>
                    tr>
                thead>
                <tbody id="tableBody">
                    
                tbody>
            table>
            <div style="float:right;">
                <div id="kkpager">div>
            div>
        div>
    div>
    
    
    <input type="text" id="num" value="">
    <input type="button" id="flush" value="点击刷新">
body>
html>

<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('' + result4.Current + '' + result4.Data[key].ID + '' + result4.Data[key].ServerId + '' + result4.Data[key].BusinessId + '' + result4.Data[key].Days + '' + result4.Data[key].Total + '');
                }
                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>

你可能感兴趣的:(javascript,js插件,bootstrap)