DataTables 的 实例 《一》
2016-01-14 15:20
281 查看
1.加载需要的js/css文件
2.
ajax：从后台返回的数据格式：
这个是后台的action
----------------------------------
dataTables
1.DOM 操作 页面table中位置排放：
l - Length changing 每页显示多少条数据选项
f - Filtering input 搜索框
t - The Table 表格
i - Information 表格信息
p - Pagination 分页按钮
r - pRocessing 加载等待显示信息
< and > - div elements 一个div元素
<"#id" and > - div with an id 指定id的div元素
<"class" and > - div with a class 指定样式名的div元素
<"#id.class" and > - div with an id and class 指定id和样式的div元素
"dom": "<'row'<'#mytool.col-xs-5'><'col-xs-7'f>r>" +"t" +"<'row'<'col-xs-5'i><'col-xs-2'l><'col-xs-6'p>>",
2.禁止某一列排序orderable
orderable: false
{"mData" : 'col4', "sTitle" : 'ck', orderable : false},
或
columnDefs:[{
orderable:false,
targets:[0,2] //指定的某一列
}],
3.隐藏列visible
{"mData" : 'col8', "sTitle" : 'statue',"visible": false},或
columnDefs:[
{ "targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}],
4.判断列是否参与搜索用bSearchable
{"mData" : 'col7', "sTitle" : 'tav', "bSearchable": false },
5.设置table的宽度
{"mData" : 'col1', "sTitle" : 'ID',"sWidth": "50%"},
{"mData" : 'col2', "sTitle" : 'label' ,"sWidth": "100px" },
6.分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button 或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
7.语言
"oLanguage":
{
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
8.使用JQueryUI
"bJQueryUI": true
9.获取选中一行的信息
$('#aaa').click( function () {
table.$('tr.selected').eq(0).text();
} );
<link href='/dataTables/css/dataTables.bootstrap.min.css' rel="stylesheet" type="text/css" /> <link href='/dataTables/css/jquery.dataTables.min.css' rel="stylesheet" type="text/css" /> <script src='/dataTables/js/jquery.dataTables.js' type="text/javascript"></script> <script src='/dataTables/js/dataTables.bootstrap.js' type="text/javascript"></script>
2.
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript">
function del(id){
alert(id);
}
var table;
$(document).ready(function() {
table = $('#example').dataTable( {
"processing": true,
"aoColumns" : [ {"mData" : 'col1', "sTitle" : 'ID',"sWidth": "100px"},
{"mData" : 'col2', "sTitle" : 'label' ,"sWidth": "100px" },
{"mData" : 'col3', "sTitle" : 'pk', "sClass" : "center"},
{"mData" : 'col4', "sTitle" : 'ck',orderable: false},
{"mData" : 'col5', "sTitle" : 'lll',orderable: false},
{"mData" : 'col6', "sTitle" : 'information'},
{"mData" : 'col7', "sTitle" : 'tav', "bSearchable": false },
{"mData" : 'col8', "sTitle" : 'statue',"visible": false},
{"mData" : 'col9', "sTitle" : 'TOOL',orderable: false}
],
ajax: {
url: "testCase.search.action"
},
columnDefs:[{
orderable:false,
targets:[0,2]
}],
"order": [0, 'desc'],
"dom": "<'row'<'#mytool.col-xs-5'><'col-xs-7'f>r>"
+"t" +"<'row'<'col-xs-4'i><'col-xs-6'l><'col-xs-8'p>>",
"initComplete": function () {
$("#mytool").append('<button type="button" id="adc" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">add</button>')
.append(' <button type="button" id="adc" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">add</button>');
},
"oLanguage":
{
"sSearch": "ss",
"oPaginate": {
"sFirst": "1",
"sNext": "123",
"sLast": "0"
}}
});
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
//table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#aaa').click( function () {
alert( table.$('tr.selected').eq(0).text());
alert( table.$('tr.selected').text());
table.$('tr.selected').re;
});
});
</script>
<div class="container">
<button id="aaa" class="btn btn-default">button</button>
<table id="example" class="table display" cellspacing="0" width="100%"></table>
</div>ajax：从后台返回的数据格式：
{"aaData":[{"col1":"\t1\t","col2":"\t1\t","col3":"\tasddd1\t","col4":2,"col5":"\tLLO1\t","col6":"\tTom1\t","col7":"\tTommonsd1\t","col8":"\tew\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t1\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t1\t);'/>update<\/button>"},{"col1":"\t10\t","col2":"\t1\t","col3":"\tasddd10\t","col4":2,"col5":"\tLLO10\t","col6":"\tTom10\t","col7":"\tTommonsd10\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t10\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t10\t);'/>update<\/button>"},{"col1":"\t11\t","col2":"\t1\t","col3":"\tasddd11\t","col4":2,"col5":"\tLLO11\t","col6":"\tTom11\t","col7":"\tTommonsd11\t","col8":"\tewrew\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t11\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t11\t);'/>update<\/button>"},{"col1":"\t12\t","col2":"\t1\t","col3":"\tasddd12\t","col4":2,"col5":"\tLLO12\t","col6":"\tTom12\t","col7":"\tTommonsd12\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t12\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t12\t);'/>update<\/button>"},{"col1":"\t13\t","col2":"\t1\t","col3":"\tasddd13\t","col4":2,"col5":"\tLLO13\t","col6":"\tTom13\t","col7":"\tTommonsd13\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t13\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t13\t);'/>update<\/button>"},{"col1":"\t14\t","col2":"\t1\t","col3":"\tasddd14\t","col4":2,"col5":"\tLLO14\t","col6":"\tTom14\t","col7":"\tTommonsd14\t","col8":"\tfdb\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t14\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t14\t);'/>update<\/button>"},{"col1":"\t15\t","col2":"\t1\t","col3":"\tasddd15\t","col4":2,"col5":"\tLLO15\t","col6":"\tTom15\t","col7":"\tTommonsd15\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t15\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t15\t);'/>update<\/button>"},{"col1":"\t16\t","col2":"\t1\t","col3":"\tasddd16\t","col4":2,"col5":"\tLLO16\t","col6":"\tTom16\t","col7":"\tTommonsd16\t","col8":"\tfdb\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t16\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t16\t);'/>update<\/button>"},{"col1":"\t17\t","col2":"\t1\t","col3":"\tasddd17\t","col4":2,"col5":"\tLLO17\t","col6":"\tTom17\t","col7":"\tTommonsd17\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t17\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t17\t);'/>update<\/button>"},{"col1":"\t18\t","col2":"\t1\t","col3":"\tasddd18\t","col4":2,"col5":"\tLLO18\t","col6":"\tTom18\t","col7":"\tTommonsd18\t","col8":"\tgfb\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t18\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t18\t);'/>update<\/button>"},{"col1":"\t19\t","col2":"\t1\t","col3":"\tasddd19\t","col4":2,"col5":"\tLLO19\t","col6":"\tTom19\t","col7":"\tTommonsd19\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t19\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t19\t);'/>update<\/button>"},{"col1":"\t2\t","col2":"\t1\t","col3":"\tasddd2\t","col4":2,"col5":"\tLLO2\t","col6":"\tTom2\t","col7":"\tTommonsd2\t","col8":"\tew\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t2\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t2\t);'/>update<\/button>"},{"col1":"\t20\t","col2":"\t1\t","col3":"\tasddd20\t","col4":2,"col5":"\tLLO20\t","col6":"\tTom20\t","col7":"\tTommonsd20\t","col8":"\tfdb\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t20\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t20\t);'/>update<\/button>"},{"col1":"\t21\t","col2":"\t1\t","col3":"\tasddd21\t","col4":2,"col5":"\tLLO21\t","col6":"\tTom21\t","col7":"\tTommonsd21\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t21\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t21\t);'/>update<\/button>"},{"col1":"\t22\t","col2":"\t0\t","col3":"\tasddd22\t","col4":2,"col5":"\tLLO22\t","col6":"\tTom22\t","col7":"\tTommonsd22\t","col8":"\tv\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t22\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t22\t);'/>update<\/button>"},{"col1":"\t23\t","col2":"\t0\t","col3":"\tasddd23\t","col4":2,"col5":"\tLLO23\t","col6":"\tTom23\t","col7":"\tTommonsd23\t","col8":"\tcxbv\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t23\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t23\t);'/>update<\/button>"},{"col1":"\t24\t","col2":"\t0\t","col3":"\tasddd24\t","col4":2,"col5":"\tLLO24\t","col6":"\tTom24\t","col7":"\tTommonsd24\t","col8":"\txcv\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t24\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t24\t);'/>update<\/button>"},{"col1":"\t25\t","col2":"\t0\t","col3":"\tasddd25\t","col4":2,"col5":"\tLLO25\t","col6":"\tTom25\t","col7":"\tTommonsd25\t","col8":"\tjhm\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t25\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t25\t);'/>update<\/button>"},{"col1":"\t3\t","col2":"\t1\t","col3":"\tasddd3\t","col4":2,"col5":"\tLLO3\t","col6":"\tTom3\t","col7":"\tTommonsd3\t","col8":"\tewrew\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t3\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t3\t);'/>update<\/button>"},{"col1":"\t4\t","col2":"\t1\t","col3":"\tasddd4\t","col4":2,"col5":"\tLLO4\t","col6":"\tTom4\t","col7":"\tTommonsd4\t","col8":"\ter\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t4\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t4\t);'/>update<\/button>"},{"col1":"\t5\t","col2":"\t1\t","col3":"\tasddd5\t","col4":2,"col5":"\tLLO5\t","col6":"\tTom5\t","col7":"\tTommonsd5\t","col8":"\tr\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t5\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t5\t);'/>update<\/button>"},{"col1":"\t6\t","col2":"\t1\t","col3":"\tasddd6\t","col4":2,"col5":"\tLLO6\t","col6":"\tTom6\t","col7":"\tTommonsd6\t","col8":"\tre\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t6\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t6\t);'/>update<\/button>"},{"col1":"\t7\t","col2":"\t1\t","col3":"\tasddd7\t","col4":2,"col5":"\tLLO7\t","col6":"\tTom7\t","col7":"\tTommonsd7\t","col8":"\tewfwe\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t7\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t7\t);'/>update<\/button>"},{"col1":"\t8\t","col2":"\t0\t","col3":"\tasddd8\t","col4":2,"col5":"\tLLO8\t","col6":"\tTom8\t","col7":"\tTommonsd8\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t8\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t8\t);'/>update<\/button>"},{"col1":"\t9\t","col2":"\t1\t","col3":"\tasddd9\t","col4":2,"col5":"\tLLO9\t","col6":"\tTom9\t","col7":"\tTommonsd9\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' onclick='javascript:del(\t9\t);'/>delete<\/button> <button type='button' class='btn btn-info' onclick='javascript:upd(\t9\t);'/>update<\/button>"}]}这个是后台的action
@Inject
TCService tcService;
/**
* {@inheritDoc}
*
* @see com.opensymphony.xwork2.ActionSupport#input()
*/
@Override
public String input() {
System.out.println("---join in suncess -for test case");
return INPUT;
}
public void findNav() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
List<Dto> listDato = tcService.findAll();
String jsonResults = loadTableDataJSON(listDato);
System.out.println(jsonResults);
PrintWriter out = response.getWriter();
out.println(jsonResults);
}
private String loadTableDataJSON(List<Dto> listDto) {
JSONObject obj = new JSONObject();
JSONArray lineItemArray = new JSONArray();
JSONObject jsonObj = null;
for (Dto dto : listDto) {
jsonObj = new JSONObject();
jsonObj.put("col1", dto.getId());
jsonObj.put("col2", dto.getFlash());
jsonObj.put("col3", dto.getInformation());
jsonObj.put("col4", 2);
jsonObj.put("col5", dto.getIntool());
jsonObj.put("col6", dto.getName());
jsonObj.put("col7", dto.getUsername());
jsonObj.put("col8", dto.getValue());
String actionStr = "<button type='button' class='btn btn-info' onclick='javascript:del(" + dto.getId()
+ ");'/>delete</button> <button type='button' class='btn btn-info' onclick='javascript:upd(" + dto.getId()
+ ");'/>update</button>";
jsonObj.put("col9", actionStr);
lineItemArray.add(jsonObj);
}
obj.put("aaData", lineItemArray);
return obj.toString();
}----------------------------------
dataTables
1.DOM 操作 页面table中位置排放：
l - Length changing 每页显示多少条数据选项
f - Filtering input 搜索框
t - The Table 表格
i - Information 表格信息
p - Pagination 分页按钮
r - pRocessing 加载等待显示信息
< and > - div elements 一个div元素
<"#id" and > - div with an id 指定id的div元素
<"class" and > - div with a class 指定样式名的div元素
<"#id.class" and > - div with an id and class 指定id和样式的div元素
"dom": "<'row'<'#mytool.col-xs-5'><'col-xs-7'f>r>" +"t" +"<'row'<'col-xs-5'i><'col-xs-2'l><'col-xs-6'p>>",
2.禁止某一列排序orderable
orderable: false
{"mData" : 'col4', "sTitle" : 'ck', orderable : false},
或
columnDefs:[{
orderable:false,
targets:[0,2] //指定的某一列
}],
3.隐藏列visible
{"mData" : 'col8', "sTitle" : 'statue',"visible": false},或
columnDefs:[
{ "targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}],
4.判断列是否参与搜索用bSearchable
{"mData" : 'col7', "sTitle" : 'tav', "bSearchable": false },
5.设置table的宽度
{"mData" : 'col1', "sTitle" : 'ID',"sWidth": "50%"},
{"mData" : 'col2', "sTitle" : 'label' ,"sWidth": "100px" },
6.分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button 或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
7.语言
"oLanguage":
{
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
8.使用JQueryUI
"bJQueryUI": true
9.获取选中一行的信息
$('#aaa').click( function () {
table.$('tr.selected').eq(0).text();
} );
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- FAQ14351]L版本12小时制状态栏时间不显示AM/PM
- Android开发笔记（四十八）Thread类实现多线程
- JSLint for Eclipse
- 正则表达式
- iOS网络-NSURLConnection简单介绍
- 关于NSNotification的使用(重点掌握)
- RAC 集群更换IP
- 配置远程控制
- C#高级编程 反射 代码示例
- thinkCMF+iis6实现伪静态， 强烈支持我大TP框架！希望更多人能喜欢它！
- 安装HTTP压力性能测试工具ABSender
- Maven多个mudule只编译、打包指定module
- 证书创建工具 和 参数详解 (Makecert.exe)
- 自定义 toast
- 后台开发面试经验
- 扣丁学堂——Tween和Frame动画
- Linux find 等 查找文件
- Golang初级系列教程-结构体匿名字段-Anonymous fields in structs
- 小丁带你走进git的世界四-重写历史记录
- C# 新委托使用方法 Lambda表达式，运算符 =>