datatable使用笔记
这是一个使用datatable的jsp文件实例，实现了点击单元格后编辑单元格所在行的内容。
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>场馆信息编辑</title>
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css"> <style type="text/css">
table.dataTable tr td:name {
text-align: center;
} table.dataTable tr td:name:before {
content: "\f096"; /* fa-square-o */
font-family: FontAwesome;
} table.dataTable tr.selected td:name:before {
content: "\f046"; /* fa-check-square-o */
}
</style>
<script type="text/javascript" charset="utf-8" language="javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="./dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" class="init">
var table;
var courtinfoarray = new Array();
$(document).ready(function() {
//获取当前点击按钮所在行的内容
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
var tdobj = $(this);
var nowTable = document.getElementById("example");
var cellArray = new Array();
var str1 = tdobj.text();
if(str1=="编辑")
{
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.parentNode.tagName.toLowerCase() == "td") { //获取行号
var rowIndex1 = target.parentNode.parentNode.rowIndex;
var column = nowTable.rows[rowIndex1].cells.length-1; for(var i=0;i<column;i++)
{
cellArray[i] = nowTable.rows[rowIndex1].cells[i].innerHTML;
} //给模态框赋初始值
document.getElementById("courtName").value=cellArray[0];//场馆名
document.getElementById("openTime").placeholder=cellArray[1];//开馆时间
document.getElementById("closeTime").placeholder=cellArray[2];//闭关时间
document.getElementById("courtCount").placeholder=cellArray[3];//资源数目
document.getElementById("courtPrice").placeholder=cellArray[4];//价格 //弹出模态框
$("#myModal").modal({ keyboard:true});
} }
} );
$.post("courtinfo.action", {"dataType":"json"}, function(data, status){
var infojson = JSON.parse(data);
var i=0;
$(infojson).each(function(){
courtinfoarray[i] = new Array();
courtinfoarray[i].push(this.v_name);
courtinfoarray[i].push(this.open_time);
courtinfoarray[i].push(this.close_time);
courtinfoarray[i].push(this.num);
courtinfoarray[i].push(this.charge);
courtinfoarray[i].push(this.is_open);
i++;
});
$('#example').dataTable( {
"oLanguage": {
"sSearch": "搜索:",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "Nothing found - 没有记录",
"sInfo": "显示第 _START_ 条到第 _END_ 条记录,一共 _TOTAL_ 条记录",
"sInfoEmpty": "显示0条记录",
"oPaginate": {
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
}
},
"bStateSave": true,
"bProcessing":true,
"data": courtinfoarray,
"columns": [
{ "title": "场馆名称" },
{ "title": "开馆时间" },
{ "title": "闭馆时间" },
{ "title": "价格", "class": "center" },
{ "title": "数目", "class": "center" },
{"title":"是否开放","class":"center" },
{"title":"编辑","class":"center",defaultContent:"<button type=\"button\" class=\"btn btn-info\">编辑</button>", orderable: true}
],
order: [ 1, 'asc' ]
} );
});
}); function mysubmit()
{
alert("确定修改吗");
document.getElementById("editform").submit();
}
</script>
</head>
<body> <ul class="breadcrumb">
<li><a href="courtinfo.jsp">首页</a></li>
<li class="active">场馆信息编辑</li>
</ul>
<body>
<div class="container" style="margin-top: 10px" align="center">
<table cellpadding="0" cellspacing="0" border="0"
class="table table-striped table-bordered table-hover dispaly"
id="example">
<thead>
<tr>
<th>馆名</th>
<th>开馆时间</th>
<th>闭关时间</th>
<th>资源数目</th>
<th>价格</th>
<th width="%18">是否开放</th>
<th>编辑</th>
</tr>
</thead>
</table>
</div> <!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">编辑该馆内容</h4>
</div>
<form class="bs-example bs-example-form" action="courtedit.action" method="post" role="form" id="editform">
<div class="input-group">
<span class="input-group-addon">场馆名称</span> <input
type="text" class="form-control" placeholder="" id="courtName" readonly="readonly" name="courtname">
</div>
<div class="input-group">
<span class="input-group-addon">开馆时间</span> <input type="text"
class="form-control" placeholder="" id="openTime" name="opentime">
</div>
<div class="input-group">
<span class="input-group-addon">闭馆时间</span> <input type="text"
class="form-control" placeholder="" id="closeTime" name="closetime">
</div>
<div class="input-group">
<span class="input-group-addon">资源数量</span> <input type="text"
class="form-control" id="courtCount" placeholder="" name="courtcount">
</div>
<div class="input-group">
<span class="input-group-addon">场馆价格</span> <input type="text"
class="form-control" id="courtPrice" placeholder="" name="courtcharge">
</div>
<div class="input-group">
<span class="input-group-addon">是否开放</span>
<select class="form-control" id="openornot" name="isopen">
<option>开放</option>
<option>闭馆</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="mysubmit()">提交更改</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
datatable使用笔记的更多相关文章
- DataTable学习笔记---排序细则、列隐藏
耽误了好几天,因为要做一个嵌入式的实验-android内核编译与裁剪,很久之前装的wubi不知道为什么运行出错了,然后看着当前的win7系统觉得有点讨厌了,也是因为快1年半没装机了,所以就重新装机了, ...
- DataTable学习笔记 - 01
DataTable 是 jQuery 的一个插件. 代码上来吧, <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换
路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...
- CUBRID学习笔记 32 对net的datatable的支持 cubrid教程
在net的驱动中实现理一下的支持 DataTable data populate Built-in commands construct: INSERT , UPDATE, DELETE Column ...
- C# 学习笔记03 DataTable
1. DataTable 类对象表示一个内存中数据表.可以用来存放从数据库得到的DataSet. DataTable dt = SqlHelper.ExecuteDataTable(parameter ...
- datatable 笔记 服务器端查询
var vTable = ""; $("#vip_data").dataTable({ "scrollY": 400, //竖向高度 滚动 ...
- C#学习笔记-DataTable导出到EXCEL（一）
public void DataTabletoExcel(DataTable dt, string path) { StreamWriter sw = new StreamWriter(path, f ...
- 第八周学习笔记-ADO.Net中DataTable的应用
ADO.Net中DataTable的应用 一.知识点描述 1.概述:DataTable是一个临时保存数据的网格虚拟表(表示内存中数据的一个表),是ADO.Net库中的核心对象. 2.DataTabl ...
- .NET小笔记-NPOI读取excel内容到DataTable
下载比较新的NPOI组件支持excel2007以上的,把.dll添加引用 引入命名空间 using NPOI.HSSF.UserModel;using NPOI.SS.UserModel;using ...
随机推荐
- 这一次带你彻底了解Cookie
前言 网络早期最大的问题之一是如何管理状态.简而言之,服务器无法知道两个请求是否来自同一个浏览器.当时最简单的方法是在请求时,在页面中插入一些参数,并在下一个请求中传回参数.这需要使用包含参数的隐藏的 ...
- MySQL服务找不到了，navicat打不开数据库连接
今天打开Navicat看看连接名,突然发现连接不上了,打开服务发现MySQL服务不见了,所以手动安装了遍MySQL服务. 详细步骤如下: 1.管理员身份打开cmd,切换到MySQL安装目录下的bin目 ...
- 如何生成CA证书
一般情况下,如果能找到可用的证书,就可以直接使用,只不过会因证书的某些信息不正确或与部署证书的主机不匹配而导致浏览器提示证书无效,但这并不影响使用.需要手工生成证书的情况有:找不到可用的证书需要配置双 ...
- 自定义spring mvc的json视图
场景 前端(安卓,Ios,web前端)和后端进行了数据的格式规范的讨论,确定了json的数据格式: { "code":"200", "data&quo ...
- pipelineDB初体验
官网:http://www.pipelinedb.com/ pipelineDB是基于postgres的stream数据库.完全兼容pg的东西. 由于产品需要解决性能这块瓶颈,老大让试试这款基于流计算 ...
- RxAndroid中observable的基本使用和表单校验操作
RxAndroid 响应式编程 类似于监听-观察者模式 在观察者模式中,你的对象需要实现 RxJava 中的两个关键接口:Observable 和 Observer.当 Observable 的状态改 ...
- Ext表单验证
//大家在很多的extjs代码中都看到了这两个,他们都起提示作用的Ext.QuickTips.init();//支持tips提示Ext.form.Field.prototype.msgTarget=' ...
- Go语言核心之美-必读
Go语言核心之美开篇了!.不管你是新手还是一代高人,在这个系列文章中.总能找到你想要的! 博主是计算机领域资深专家并且是英语专8水平,翻译标准仅仅有三个:精确.专业.不晦涩,为此每篇文章可能都要耗费数 ...
- 《C程序猿从校园到职场》勘误
(本人正在參加2015博客之星评选.诚邀你来投票,谢谢:username=zhouzxi">http://vote.blog.csdn.net/blogstar2015/candida ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...