這篇文章主要介紹Angualrjs和bootstrap相結(jié)合如何實(shí)現(xiàn)數(shù)據(jù)表格table,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供寶應(yīng)網(wǎng)站建設(shè)、寶應(yīng)做網(wǎng)站、寶應(yīng)網(wǎng)站設(shè)計(jì)、寶應(yīng)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、寶應(yīng)企業(yè)網(wǎng)站模板建站服務(wù),10余年寶應(yīng)做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
AngularJS的數(shù)據(jù)表格
需要使用angualarjs、bootstrap、dirPagination.js
效果圖:
1.html部分
angularjs的數(shù)據(jù)表格
2.angularjsTable.js部分
'use strict'; var app = angular.module('app', [ 'angularUtils.directives.dirPagination' ]); app.controller('tableCtrl', ['$http', function ($http) { var self = this; //數(shù)據(jù)表格的控制器,動(dòng)態(tài)加載table表格數(shù)據(jù) self.users = []; //declare an empty array self.pageno = 1; // initialize page no to 1 self.total_count = 0; self.itemsPerPage = 10; //this could be a dynamic value from a drop down self.getData = function (pageno) { // This would fetch the data on page change. //In practice this should be in a factory. self.pageno = pageno; self.users = []; $http({ method: 'get', url: 'json/myApply.txt', data: { pagesize: self.itemsPerPage, pageno: self.pageno } }).success(function (response) { self.users = response.data; //ajax request to fetch data into self.data self.total_count = response.total_count; }); }; self.getData(self.pageno); //數(shù)據(jù)表格的控制器 end }]);
3.json數(shù)據(jù)部分 myApply.txt
{ "data":[ { "id":"1", "code":"dheu22102d", "name":"項(xiàng)目管理", "version":"v1.0.1", "status":"未啟用" }, { "id":"2", "code":"asd1234ddd", "name":"員工管理", "version":"v2.0.1", "status":"已啟用" } ], "total_count": 22 }
以上是“Angualrjs和bootstrap相結(jié)合如何實(shí)現(xiàn)數(shù)據(jù)表格table”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!