angularJS+bootstrap实现一个表格分页效果代码-html代码-BFW代码库

angularJS+bootstrap实现一个表格分页效果代码

代码语言：html

所属分类：表格

代码描述：angularJS+bootstrap实现一个表格分页效果代码，使用了/ui-bootstrap-tpls插件。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.2.4.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ui-bootstrap-tpls.min.js"></script>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <style>
        .panel{width:60%;margin:0 auto;text-align: center;}
        	.form-inline{width:60%;margin:0 auto;}
    </style>

</head>

<body ng-app="app" ng-controller="ctrl">
    <div class="panel">
        <div class="row req form-inline">
            <div class="col-md-8 col-md-offset-4 solid_top form-group">
                <div class="pull-right">
                    <label>展示条数: 
	                    <select  class="form-control" ng-change="change(selectedLimit)" ng-model="selectedLimit" ng-options="value.limit for value in values"></select>
	                </label>
                </div>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <td>序号</td>
                    <td>模块</td>
                    <td>信息</td>
                    <td>时间</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="data in datas">
                    <td>{{data.order}}</td>
                    <td>{{data.module}}</td>
                    <td>{{data.message}}</td>
                    <td>{{data.time}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="row form-inline">
        <div class="col-md-8">
            <uib-pagination total-items="page.totalCount" ng-model="page.pageNo" max-size="5" class="samplePage pagination" boundary-links="true" force-ellipses="false" first-text="首页" last-text="末页" previous-text="上一页" next-text="下一页" items-per-page="page.limit"
                ng-change="pageChanged()" boundary-link-numbers="true">
            </uib-pagination>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" style="width:100px;margin:25px 0" name="" ng-model="go" />
            <a class="btn btn-primary btn-sm" ng-click="setPage(go)">跳转</a>
        </div>
    </div>
    <script type="text/javascript">
    
         Mock.mock('test.json',  {
	"total":10,
	"data":[{
	      "order":10,"module":"模块10",
	      "message":"信息10",
	      "time":"2016-07-02"
	    },
	    {
	      "order":9,"module":"模块9",
	      "message":"信息9",
	      "time":"2016-07-02"
	    },{
	      "order":8,"module":"模块8",
	      "message":"信息8&.........完整代码请登录后点击上方下载按钮下载查看