Angualrjs和bootstrap相结合实现数据表格table
AngularJS的数据表格
需要使用angualarjs、bootstrap、dirPagination.js
效果图：
1.html部分
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>angularjs的数据表格</title>
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" />
<link href="css/special.css" rel="external nofollow" rel="stylesheet" />
<script src="js/angular-1.3.0.js"></script>
<script src="vendor/dirPagination.js"></script>
<script src="js/app/angularjsTable.js"></script>
</head>
<body>
<form ng-controller="tableCtrl as aly">
<div class="sp-page-content">
<div class="sp-page-title">
angularjs的数据表格
</div>
<table class="sp-grid">
<thead>
<tr>
<th style="width: 20%;">应用代码</th>
<th style="width: 20%;">应用名称</th>
<th style="width: 20%;">版本</th>
<th style="width: 20%;">状态</th>
<th style="width: 20%;">操作</th>
</tr>
</thead>
<tbody id="myApplyTable">
<tr ng-show="aly.users.length <= 0">
<td colspan="5" style="text-align: center;">还没有数据</td>
</tr>
<tr dir-paginate="user in aly.users|itemsPerPage:aly.itemsPerPage" total-items="aly.total_count">
<td>{{user.code}}</td>
<td>{{user.name}}</td>
<td>{{user.version}}</td>
<td>{{user.status}}</td>
<td>
<a class="sp-color-blue">安 装</a>|
<a class="sp-color-green">查 看</a>
</td>
</tr>
<!--<tr>
<td>asd1234ddd</td>
<td>员工管理</td>
<td>v2.0.1</td>
<td>已启用</td>
<td><a ui-sref="app.apply_view" class="ligblue">查 看</a></td>
</tr>-->
</tbody>
</table>
<dir-pagination-controls max-size="8"
direction-links="true"
boundary-links="true"
on-page-change="aly.getData(newPageNumber)">
</dir-pagination-controls>
</div>
</form>
</body>
</html>
2.angularjsTable.js部分
'use strict';
var app = angular.module('app', [
'angularUtils.directives.dirPagination'
]);
app.controller('tableCtrl', ['$http', function ($http) {
var self = this;
//数据表格的控制器，动态加载table表格数据
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);
//数据表格的控制器 end
}]);
3.json数据部分 myApply.txt
{
"data":[
{
"id":"1",
"code":"dheu22102d",
"name":"项目管理",
"version":"v1.0.1",
"status":"未启用"
},
{
"id":"2",
"code":"asd1234ddd",
"name":"员工管理",
"version":"v2.0.1",
"status":"已启用"
}
],
"total_count": 22
}
以上所述是小编给大家介绍的Angualrjs和bootstrap相结合实现数据表格table，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test
-
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空 显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)
-
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl
-
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load
-
el表达式 写入bootstrap表格数据页面的实例代码
el表达式,写入bootstrap表格,简化代码,效果图: 不多说,上干货: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.
-
BootStrap数据表格实例代码
首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:
-
Angualrjs和bootstrap相结合实现数据表格table
AngularJS的数据表格 需要使用angualarjs.bootstrap.dirPagination.js 效果图: 1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="te
-
layui实现数据表格table分页功能（ajax异步）
layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo
-
解决layui数据表格table的横向滚动条显示问题
加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列
-
layui数据表格 table.render 报错的解决方法
一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp
-
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行
-
Layui数据表格 前后端json数据接收的方法
先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量
-
Angular.js与Bootstrap相结合实现表格分页代码
先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
-
使用layui 渲染table数据表格的实例代码
先上最终效果图: 1,引入layui的css和js文件 <link rel="stylesheet" href="lib/layui/css/layui.css" rel="external nofollow" > <script src="lib/layui/layui.js"></script> 2,在页面放置一个table元素 <table class="layui-h