西蜀石兰
- 浏览: 119003 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
jaimyjie：
能发份源码？谢谢,32166920@qq.com
DataTables实现增删改查(1.10版本) -
liq123：
很不错的博客，受益良多。
事务和原子性的一些思考 -
liq123：
事务和原子性的一些思考 -
西蜀石兰：
唯我独赞mo 写道datatable editor的ajax如 ...
DataTables实现增删改查(1.10版本) -
唯我独赞mo：
datatable editor的ajax如何进行再次加载呢， ...
DataTables实现增删改查(1.10版本)
国际惯例贴下效果图，大红真心丑，无耐看的人是三四十岁的大叔，理解下吧。
设置颜色的代码如下，其实是一个回调函数
最后贴上完整的js代码
设置颜色的代码如下，其实是一个回调函数
"fnRowCallback" : function(nRow, aData) {
if (aData[2] == "报警") {
$('td', nRow).css({
"background-color" : "#e10000",
"color" : "#fff"
});
} else {
$('td', nRow).css({
"background-color" : "#F9F9F9",
});
}
},
最后贴上完整的js代码
/**
*
*/
$(document).ready(function() {
drawTable();
});
function drawTable() {
$('#example')
.DataTable(
{
"language" : {
"zeroRecords" : "无数据",
"info" : "当前_PAGE_页，第_START_到_END_条，共 _TOTAL_条记录",
"paginate" : {
"next" : "下一页",
"previous" : "上一页"
}
},
"pageLength" : 15,
"dom" : 'tip',
"data" : [
[
"1",
"国政通身份认证",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"2",
"<span style='color:#fff'>鹏元身份认证</span>",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"3",
"同盾风险决策",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"4",
"鹏元四要素",
"关闭",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"5",
"块钱",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"6",
"国政通身份认证",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"7",
"<span style='color:#fff'>鹏元身份认证</span>",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"8",
"同盾风险决策",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"9",
"鹏元四要素",
"关闭",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"10",
"块钱",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"<span>11</span>",
"国政通身份认证",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"12",
"<span style='color:#fff'>鹏元身份认证</span>",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"13",
"同盾风险决策",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"14",
"鹏元四要素",
"关闭",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"15",
"块钱",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"<span>16</span>",
"国政通身份认证",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"17",
"<span style='color:#fff'>鹏元身份认证</span>",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"18",
"同盾风险决策",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"19",
"鹏元四要素",
"关闭",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"20",
"块钱",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"<span>21</span>",
"国政通身份认证",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"22",
"<span style='color:#fff'>鹏元身份认证</span>",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
[
"23",
"同盾风险决策",
"正常",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"24",
"鹏元四要素",
"关闭",
"<a class='normal' onclick='showRequest()'>查看详情</a>",
"<a class='normal' onclick='showResponse()'>查看详情</a>",
"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
[
"25",
"块钱",
"报警",
"<a class='alarm' onclick='showRequest()'>查看详情</a>",
"<a class='alarm' onclick='showResponse()'>查看详情</a>",
"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
],
"fnRowCallback" : function(nRow, aData) {
if (aData[2] == "报警") {
$('td', nRow).css({
"background-color" : "#e10000",
"color" : "#fff"
});
} else {
$('td', nRow).css({
"background-color" : "#F9F9F9",
});
}
},
})
}
function showRequest() {
$("#requestModal").modal("show");
}
function showResponse() {
$("#responseModal").modal("show");
}
function showAnalysis() {
window.location.href = "./identity.jsp"
}
- 大小: 45.2 KB
分享到：
发表评论
-
关于org.apache.commons.httpclient源码的一些跟进
2017-05-09 16:21 695最近想要把一个比较小的文件存到数据库中，网上搜了一大堆乱七八糟 ... -
dataTables后台分页功能的实现
2016-11-14 19:35 2608表格数据量如果很大，超过5000行的话，建议使用后台分页功能。 ... -
关于解决JQuery无法获取初始化时js生成的html标签
2016-11-01 17:30 774今天遇到这个问题，页面的一些div需要由js生成，而后需要对生 ... -
css+js实现进度条
2016-10-19 20:10 1432说一下思路，这里用到的js方法需要有一个类似java的调度器， ... -
CSS+JS写折叠下拉菜单
2016-10-18 14:36 3140看到别人通过id和增加的属性来对应父子关系，觉得麻烦，想着能不 ... -
折叠菜单的两种实现
2016-10-10 11:03 0两种实现方式，一种是纯css实现，效果是鼠标经过时展开，移出后 ... -
tomcat知识点整理
2016-09-19 16:21 0整理下自己在使用tomcat时遇到的一些知识点 1.zip\ ... -
使用maven搭建servlet3.0的web项目
2016-09-19 15:42 0需求： 1.运维根据pom.xml文件进行自动部署 2.存在心 ... -
dataTable重新异步加载表格数据
2016-09-01 20:55 15842如果表格的数据不是固定的，譬如需要根据时间等参数变化，那么不可 ... -
dataTables整理
2016-09-01 20:39 784使用dataTable很久了，最近想整理下这个插件的一些常用内 ... -
dataTable-editor的设置（2）
2016-08-10 18:56 3016--2016-12-30补充 这几天使用checkbox这个属 ... -
dataTables未解决问题
2016-05-23 18:31 6351.集成bootstrap的datetimepicker失败， ... -
DataTable之Editor个性化设置
2016-05-23 18:18 57841.如何设置增删改查按钮的位置以及是否显示？ table ... -
DataTables实现增删改查(1.10版本)
2016-05-16 18:48 7965这段时间项目需要做个APP的管理后台，运维人员用的，简单的增删 ... -
checkbox获取选中元素的值
2016-02-17 17:49 778使用input标签时，页面修改内容在debug模式下不会跟着变 ... -
使用bootstrap搭建查询框（2）
2016-01-28 11:04 746上午接着折腾，总算做出个能看的了，实际效果如下： 先说一 ... -
使用bootstrap搭建查询框
2016-01-27 18:16 1449最近在研究项目JSP页面用到的一些标签，有些标签确实好用，不过 ... -
Echart--tooltip
2015-09-08 16:07 2633这就是一个提示信息，当鼠标经过某一个区域时，有一个信息框 用 ... -
Echart-title
2015-09-08 15:44 1068这个其实没有太多的内容，这是一个对象，这个对象本身有一些参数： ... -
echart使用初级篇
2015-09-08 15:36 816还好今年刚开始接触代码，所以很自然的用到了百度的Echarts ...
相关推荐
ngx-datatable-master.zip 文件很可能是这个库的源代码压缩包，包含了项目的所有源码、示例、文档等内容。在这个库中，你可以深入理解如何在 Angular 应用中高效地处理和展示大量数据。 首先，`ngx` 前缀是 Angular...
"datatable-main.zip" 是一个包含有关 Datatable 主要功能和使用的资源压缩包。Datatable 是一个广泛用于Web开发的数据展示库，尤其在JavaScript环境中，它提供了丰富的功能来处理和展示表格数据。这个压缩包可能...
Laravel开发-datatable-model 一个专用的类（模型），用于为Laravel配置chumper的datatable包（https://github.com/chumper/datatable），以尽可能保持控制器的干净。
Ajax-datatable-using-ajax-php.zip,使用ajax php的数据表,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的...
它提供了一种方便的方式来呈现表格格式的数据，包括排序、分页和编辑功能。GridView可以与多种数据源结合，如DataTable、DataSet或Entity Framework等，通过数据绑定来展示数据。用户可以通过简单的配置和自定义模板...
标题 "List-DataTable-2019-01-03.zip" 提示我们这是一个关于在C#中处理数据表转换的项目，日期为2019年1月3日。这个项目可能涉及将列表（List）对象转换为数据表（DataTable）或反之。在描述中，提到了使用第三方库...
资源分类：Python库 所属语言：Python 资源全名：django_ajax_datatable-4.0.2-py2.py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
这个“datatable-基本初始化.rar”压缩包提供的资料着重于介绍如何初始化 DataTables 和如何根据需求对其进行自定义设置。 首先，让我们深入理解 DataTables 的基本概念。DataTables 是一个强大的开源库，它可以对 ...
本文将详细讨论如何在C#中将XML与DataTable-DataSet进行互转。 首先，我们来看如何将DataTable对象转换为XML字符串。这个过程涉及到`DataTable.WriteXml`方法，该方法接收一个XmlWriter对象，用于将DataTable的内容...
return $dataTable->render('users.index'); } ``` 在视图文件（如 `users.index.blade.php`）中，我们需要加载 DataTables 的 JavaScript 和 CSS 资源，并通过 AJAX 调用我们的 DataTable。以下是一个基本示例： ...
表格内编辑文本，可动态增加行
在名为`dataTable-Editor-master`的压缩包文件中，通常会包含以下内容： 1. `js`文件夹：存放DataTable Editor的JavaScript源代码和可能的库依赖。 2. `css`文件夹：包含必要的CSS样式文件，用于表格的显示和编辑...
angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件，具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts
cd mongoose-datatable-demo && npm install bower install 数据库播种 使用node-mongo-seeds以获得更多信息，请检查：（ ）运行命令： seed 文件seed.json包含将使用/ seeds /上的.json文件填充的数据库。集合将...
标题“azure-datatable-tools”指的是一个与Azure相关的数据表工具集，这通常涉及到对云存储中的数据进行管理和操作的库或框架。这个工具可能包含了帮助开发者在Azure环境中处理数据表服务的功能，比如创建、查询、...
硬盘文件映射读取
综上所述，"zend-framework-2-jquery-datatable-library" 提供了一个高效的解决方案，帮助开发者在 Zend Framework 2 应用程序中实现功能强大的数据表格，结合 jQuery DataTables 的优点，提供了优秀的用户体验和...
标题中的“datatable框架表格生成”主要指的是利用`datatable`库来动态地根据JSON数据生成表格。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易读性和易解析性而广泛应用于服务器与客户端...
精简数据表jslite-datatable-js-轻量级JavaScript库，用于“启动” HTML表。 特色功能在HTML表中分页。 配置每页的记录数。 搜索输入。 通过添加CSS类完全可自定义。要求jQuery.1.4 +桌面浏览器支持IE9 +，Firefox 4...