一、参考代码

<%@ include file="./include/header.jsp"%>
<!-- jquery.dataTables.css -->
<link href="/plugins/DataTables-1.10.16/media/css/dataTables.bootstrap.css" rel="stylesheet"
type="text/css"></link>
<link rel="stylesheet" href="/plugins/DataTables-1.10.16/extensions/Responsive/css/responsive.dataTables.css"></link>
<!-- DATE STYLES-->
<link rel="stylesheet" href="/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"></link> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cf" uri="com.data.web.view.function" %>
<div id="page-wrapper">
<div id="page-inner"> <div class="row">
<div class="col-md-12">
<h1 class="page-header">
DataTables<small>示例</small>
</h1>
</div>
</div> <div class="row">
<form class="form-inline col-sm-11" id="search_form">
<div class="form-group ">
<input class="form-control" placeholder="名称或其他" name="name">
</div>
<div class="form-group">
<select class="form-control" id="gender" name="gender">
<option value="">--</option>
<option value=1>男</option>
<option value=0>女</option>
</select>
</div>
<div class="form-group">
<label for="beginTime">开始</label> <input type="text"
class="datepicker form-control"
data-date-format="yyyy-mm-dd 00:00:00" name="beginTime"
id="beginTime" />
</div>
<div class="form-group">
<label for="endTime">截止</label> <input type="text"
class="datepicker form-control"
data-date-format="yyyy-mm-dd 23:59:59" name="endTime" id="endTime" />
</div>
<button type="button" id="query" class="btn btn-success query mt-5">查询</button>
<button type="button" id="add" class="btn btn-info add mt-5">新建</button>
</form>
</div>
<!-- /. ROW --> <div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">示例列表</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered responsive table-hover" id="table" cellspacing="0" width="100%">
<thead>
<tr>
<th width="8%" class="min-mobile-l">姓名</th>
<th width="10%" class="min-mobile-l">电话</th>
<th width="10%" class="min-mobile-l">性别</th>
<th width="10%" class="min-mobile-l">时间</th>
<th width="8%" class="min-mobile-l">操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /. ROW --> </div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
<%@ include file="./include/footer.jsp"%>
<!-- DATA TABLE SCRIPTS -->
<script src="/plugins/DataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/dataTables.bootstrap.min.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
$(document).ready(function() { $('.datepicker').datetimepicker({
language : 'zh-CN',
autoclose : true
}); refreshTable();//刷新列表数据内容
clickEvent();//绑定表格中的按钮事件 //点击查询
$('button.query').on("click", function() {
refreshTable();
clickEvent();
}); $('button.add').on('click',function(){
location.href = '/create';
}); });
function clickEvent(){
$('#table').on('click','.js-delete',function(){
if(confirm('确认删除该条数据?')){
var id = $(this).attr('data-id');
$.get('/delete?id='+id+'', function(result){
console.log(result);
if(result==0){
alert('删除成功');
window.location.reload();
}
})
}
}).on('click','.js-edit',function(){
var id = $(this).attr('data-id');
location.href = '/edit?id='+id+'';
})
} function refreshTable(){ var $searchForm = $('#search_form').on('submit', function () {
$dt.DataTable().searchEx({}).draw();
return false;
}); var $dt = $('#table').on('preXhr.dt', function (e, settings, data) {
//data.search.value = $searchForm.formGet();
}).dataTable({
"columns" : [
{
"data" : "name",
"class" : "text-center"
},
{
"data" : "tel",
"class" : "text-center",
"render" : function(data, type, row) {
if(data){
var ms="00-";
ms=row.name+"的电话"+ms+data;
return ms;
}
return "";
}
},
{
"data" : "gender",
"class" : "text-center",
"render" : function(data, type, row) {
if(data==0){
return "女";
}else if(data==1){
return "男";
}
return "";
}
},
{
"data" : "creatTime",
"class" : "text-center",
"render" : function(data, type, row) {
return new Date(data).Format("yyyy-MM-dd hh:mm:ss");
}
},
{
"data" : "id",
"class" : "text-center",
"render" : function(data, type, row) {
return '<span class="btn btn-primary btn-xs ml-5 js-edit" data-id="'+data+'">编辑</span> <span class="btn btn-danger btn-xs ml-5 js-delete" data-id="'+data+'">删除</span>';
}
}
],
"ajax" : {//类似jquery的ajax参数,基本都可以用。
type : "post",//后台指定了方式,默认get,外加datatable默认构造的参数很长,有可能超过get的最大长度。
url : "/listData",
dataSrc : "data",//默认data,也可以写其他的,格式化table的时候取里面的数据
data : function(d) {//d 是原始的发送给服务器的数据,默认很长。
var param = {};//因为服务端排序,可以新建一个参数对象
param.start = d.start;//开始的序号
param.length = d.length;//要取的数据的
var formData = $(
"#search_form")
.serializeArray();//把form里面的数据序列化成数组
formData
.forEach(function(e) {
param[e.name] = e.value;
});
return param;//自定义需要传递的参数。
},
},
//"ajax": $.fn.dataTable.pagerAjax({url: "/listData"}),
"destroy":true,
lengthChange : false,
serverSide : true,//分页,取数据等等的都放到服务端去
searching : false,
processing : true,//载入数据的时候是否显示“载入中”
bDestroy : true,
pageLength : 20,//首次加载的数据条数
ordering : false,//排序操作在服务端进行,所以可以关了。
language : {
processing : "载入中",//处理页面数据的时候的显示
paginate : {//分页的样式文本内容。
previous : "上一页",
next : "下一页",
first : "第一页",
last : "最后一页"
},
zeroRecords : "没有内容",//table tbody内容为空时,tbody的内容。
//下面三者构成了总体的左下角的内容。
info : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//左下角的信息显示,大写的词为关键字。
infoEmpty : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//筛选为空时左下角的显示。
infoFiltered : ""//筛选之后的左下角筛选提示(另一个是分页信息显示,在上面的info中已经设置,所以可以不显示),
},
"columnDefs": [{
"defaultContent": "",
"targets": "_all"
}]
}).on('click', 'a[row-index]', function () {
});
} //对Date的扩展,将 Date 转化为指定格式的String
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
//年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
//例子:
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
//(new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</body>
</html>

参看链接:

https://blog.csdn.net/zzq900503/article/details/79211136

Bootstrap框架--DataTables列表示例--添加判断的更多相关文章

  1. PHP 结合 Bootstrap 实现学生列表以及添加学生功能实现(继上篇登录及注册功能之后)

    本人是一位学生,正在学习当中,可能BUG众多,请见谅并指正,谢谢!!! 学生列表实现 HTML: <!DOCTYPE html> <html> <head> < ...

  2. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  3. Bootstrap历练实例:向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

  4. Bootstrap历练实例:向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap框架菜鸟入门教程

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...

  7. [转载:Q1mi]Bootstrap和基于Bootstrap的登录验证示例

    转载自:Q1mi Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支 ...

  8. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  9. bootstrap框架的搭建

    bootstrap框架 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快 ...

随机推荐

  1. 工作流引擎Activiti使用进阶!详细解析工作流框架中高级功能的使用示例

    Activiti高级功能简介 Activit的高级用例,会超越BPMN 2.0流程的范畴,使用Activiti高级功能需要有Activiti开发的明确目标和足够的Activiti开发经验 监听流程解析 ...

  2. P1045 [NOIP2003 普及组] 麦森数

    题目描述 形如2^P−1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2^P−1不一定也是素数. 到1998年底,人们已找到了37个麦森数.最大的一个是P=3021377, ...

  3. Spring Boot下的一种导入Excel文件的代码框架

    1.前言 ​ Spring Boot下如果只是导入一个简单的Excel文件,是容易的.网上类似的文章不少,有的针对具体的实体类,代码可重用性不高:有的利用反射机制或自定义注解,开发了Excel导入工具 ...

  4. SpringCloud入门及创建分布式项目

    1.了解微服务 1.1 什么是微服务 微服务是一种架构风格 一个应用拆分为一组小型服务 每个服务运行在自己的进程内,也就是可独立部署和升级 服务之间使用轻量级HTTP交互 服务围绕业务功能拆分 可以由 ...

  5. 全新安装Windows版 Atlassian Confluence 7.3.1 + MySQL 8.0,迁移数据,并设置服务自启

    Confluence是一个专业的企业知识管理与协同软件,也可以用于构建企业wiki.使用简单,但它强大的编辑和站点管理特征能够帮助团队成员之间共享信息.文档协作.集体讨论,信息推送. 安装Conflu ...

  6. css 设置body背景图片铺满

    background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; backg ...

  7. 资源:Intellij IDEA 最新旗舰版注册激活破解*附注册码(2020年亲测)

    永久激活 1. 下载jetbrains-agent.jar包(2020.03.22亲测) 链接: https://pan.baidu.com/s/1BFXPwlROEF03BkhGzGIgEA 提取码 ...

  8. CentOS6.5 mini安装到VirtualBox虚拟机中

    下载Oracle VM VirtualBox 下载下来安装 下载镜像 http://archive.kernel.org/centos-vault/6.5/isos/i386/CentOS-6.5-i ...

  9. Java实验项目六——使用DAO模式实现对职工表的操作

    Program: 利用JDBC访问职工信息表,实现对职工信息的添加.更新.删除.按照职工号查找.查找全部职工的功能. Description:在这里我采用了DAO设计模式完成对职工表的操作,下面介绍一 ...

  10. 【重学Java】Stream流

    Stream流 体验Stream流[理解] 案例需求 按照下面的要求完成集合的创建和遍历 创建一个集合,存储多个字符串元素 把集合中所有以"张"开头的元素存储到一个新的集合 把&q ...