datables的基本操作

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@include file="/WEB-INF/views/commons/common.jsp"%>
<%@include file="/WEB-INF/views/themes/bootstrap_theme.jsp"%>
<%@include file="/WEB-INF/views/commons/bootstrap_datetimepicker.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<title>常用意见列表</title>
<link rel="stylesheet" href="${UI_FRAME_PATH}/data-tables/1.10.5/extensions/styling/bootstrap/dataTables.bootstrap.css">
<link href="${UI_FRAME_PATH }/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" rel="stylesheet" >
<link href="${CSS_PATH }/jquery-ui.css" type="text/css" rel="stylesheet" />
<link href="${CSS_PATH }/mstyle.css" type="text/css" rel="stylesheet" />
<link href="${CSS_PATH }/font-awesome.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${UI_FRAME_PATH}/data-tables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${UI_FRAME_PATH}/data-tables/1.10.5/extensions/styling/bootstrap/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="${UI_MODULES_PATH}/uniflow/autoRefresh.js"></script>
<script type="text/javascript" src="${UI_MODULES_PATH}/uniflow/tools.js"></script>
<script type="text/javascript" src="${STATIC_RESOURCES_PATH }/webSrv-potal/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${JS_PATH }/myopinion/myopinion.js"></script>
</head>

</script>
</html>

js代码块

$(document).ready(function() {
var table = $('#draftTaskTable').DataTable();//draftTaskTable为jsp中的table的id
table.state.clear();//清除原来状态
initTable();
});

"oLanguage" : {
"sUrl" : UI_FRAME_PATH + "/data-tables/1.10.5/extensions/language/Chinese.json"
},
"fnServerData" : function(sSource, aoData, fnCallback) {
aoData.push( { "name": "sdata", "value": JSON.stringify(sdata) } );
$.ajax({
"type" : 'post',
"url" : sSource,
"dataType" : "json",
"data" : {
"aoData" : JSON.stringify(aoData),
"opinionName":$('#fuzzy-search-content').val()
},
"success" : function(resp) {
fnCallback(resp);
},
"error":function(resp){
alert("error;;");
}
});
},
"fnDrawCallback": function(){
var api = this.api();
var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
api.column(1).nodes().each(function(cell, i) {
//此处 startIndex + i + 1;会出现翻页序号不连续，主要是因为startIndex 的原因,去掉即可。
cell.innerHTML = startIndex + i + 1;//序号列的序号
});
}

};
var sdata = {
sdata:[{name: 'opinionName', value: $('#fuzzy-search-content').val()}]
};
if(ext){
option = $.extend(true, option, ext);
}
_dataTablesInstance = $("#draftTaskTable").DataTable(option);
$("#btn-add").click(function(){
userManage.addItemInit();
});

$("#fuzzy-search").click(function(){
userManage.searchItemInit();
});

$("#btn-alldel").click(function(){
var arrItemId = [];
$("tbody :checkbox:checked").each(function(){
var item =_dataTablesInstance.row($(this).closest('tr')).data();
arrItemId.push(item);
});
userManage.deleteItem(arrItemId);
});

$("#opinion-edit-save").click(function(){
userManage.editItemSubmit();
});

$('#draftTaskTable').on("change",":checkbox",function() {
if ($(this).is("[name='cb-check-all']")) {
//全选
$(":checkbox",$('#draftTaskTable')).prop("checked",$(this).prop("checked"));
}else{
//一般复选
var checkbox = $("tbody :checkbox",$('#draftTaskTable'));
$(":checkbox[name='cb-check-all']",$('#draftTaskTable')).prop('checked', checkbox.length == checkbox.filter(':checked').length);
}
}).on("click",".td-checkbox",function(event) {
//点击单元格即点击复选框
!$(event.target).is(":checkbox") && $(":checkbox",this).trigger("click");
}).on("click","#btn-edit",function() {
//点击编辑按钮
var item = _dataTablesInstance.row($(this).closest('tr')).data();
$(this).closest('tr').addClass("active").siblings().removeClass("active");
userManage.currentItem = item;
userManage.editItemInit(item);
}).on("click","#btn-del",function() {
//点击删除按钮
var item =_dataTablesInstance.row($(this).closest('tr')).data();
$(this).closest('tr').addClass("active").siblings().removeClass("active");
userManage.deleteItem([item]);
}).on("click","#moveUp",function() {
//点击上移按钮
var item =_dataTablesInstance.row($(this).closest('tr')).data();
$(this).closest('tr').addClass("active").siblings().removeClass("active");
userManage.moveItem(item,"moveUp");
}).on("click","#moveDown",function() {
//点击下移按钮
var item =_dataTablesInstance.row($(this).closest('tr')).data();
$(this).closest('tr').addClass("active").siblings().removeClass("active");
userManage.moveItem(item,"moveDown");
});

}

function saveAddopinion(){
var opinionName = $("#opinion-add").val().trim();
if(null == opinionName && opinionName.size()==0){
alert("意见内容不能为空！");
return;
}
$.ajax({
url:FRAMEWORK_BASE_PATH+"/myopinion/addOpinion",
type:"post",
dataType:"json",
data:{
"opinionName":opinionName
},
success:function(json){
if(json.result== true){
$("#user-add").hide();
$("#opinion-add").val("");
var tableSetings=$('#draftTaskTable').dataTable().fnSettings();
var paging_length=tableSetings._iDisplayLength;//当前每页显示多少
var page_start=tableSetings._iRecordsTotal;//当前页开始
var pagenum=Div(page_start,paging_length);
$("#draftTaskTable").DataTable().page(pagenum).draw( false );

/*$("#draftTaskTable").DataTable().page(0).draw();*/
/* $('#draftTaskTable').DataTable().state.clear();//清除原来状态
initTable();*/
}
}
});
}

datables的基本操作的更多相关文章

Key/Value之王Memcached初探：二、Memcached在&period;Net中的基本操作
一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...
Android Notification 详解（一）——基本操作
Android Notification 详解(一)--基本操作版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰源码:AndroidDemo/Notification 文中如有纰 ...
Android Notification 详解——基本操作
Android Notification 详解版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...
三、Redis基本操作——List
小喵的唠叨话:前面我们介绍了Redis的string的数据结构的原理和操作.当时我们提到Redis的键值对不仅仅是字符串.而这次我们就要介绍Redis的第二个数据结构了,List(链表).由于List ...
二、Redis基本操作——String(实战篇)
小喵万万没想到,上一篇博客,居然已经被阅读600次了!!!让小喵感觉压力颇大.万一有写错的地方,岂不是会误导很多筒子们.所以,恳请大家,如果看到小喵的博客有什么不对的地方,请尽快指正!谢谢! 小喵的唠 ...
一、Redis基本操作——String(原理篇)
小喵的唠叨话:最近京东图书大减价,小喵手痒了就买了本<Redis设计与实现>[1]来看看.这里权当小喵看书的笔记啦.这一系列的模式,主要是先介绍Redis的实现原理(可能很大一部分会直接照 ...
Linq查询基本操作
摘要:本文介绍Linq查询基本操作(查询关键字) - from 子句 - where 子句 - select子句 - group 子句 - into 子句 - orderby 子句 - join 子句 ...
C++ map的基本操作和使用
原文地址:http://blog.sina.com.cn/s/blog_61533c9b0100fa7w.html Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可 ...
python之最强王者（10）———文件(File)、输入输出的基本操作
1. Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 2.打印到屏幕最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式. ...

随机推荐

alloc
注意,凡是用到指针的地方,一定要在堆中分配空间,否则指针释放了,那就不能够传值了. 将一个对象作为另外一个对象的成员变量,可以直接将两个对象联系起来.
jboss端口说明
http://blog.csdn.net/yangbobo1992/article/details/8876587 jboss端口修改说明 1. jboss 的端口修改位置总结 Jboss通常占用的端 ...
jenkins远程命令执行利用工具
昨天看小飞侠写的py的jenkins的脚本,昨天晚上在微信里评论今天写一个JAVA的GUI的tools. 早上花了点时间写一下: code: package com.tools; import jav ...
Go语言参数中的三个点是干什么的
Go语言函数中有三个点...表示为可变参数,可以接受任意个数的参数. 示例代码: package main import "fmt" func Greeting(prefix st ...
JQuery一句话实现全选/反选
$("#checkAll").click(function () { if (this.checked) { $("input[name='checkbox']& ...
Python中的冒泡排序
冒泡排序冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交换,也 ...
Sonar+maven+jenkins集成，Java代码走查
Sonar服务在Sonar安装与使用篇已经介绍过,此文章不再说了 Jenkins的安装与配置方法参考http://www.cnblogs.com/chenchen-tester/p/6408815.h ...
小米note开启调试模式
1.刷机为开发版本. 2.拨电话界面输入 *#*#717717#*#* 开启调试模式. 3.驱动好像会自己安装.
Java面向对象习题
1: 抛出异常:throw声明异常:throwsthrow用于在程序中抛出异常,throws用于在方法内抛出异常.throw抛出的异常没有被处理的话必须有throws有throws ,但是不一定必须有 ...
BZOJ 2120 数颜色 (带修莫队)
2120: 数颜色 Time Limit: 6 Sec Memory Limit: 259 MBSubmit: 6367 Solved: 2537[Submit][Status][Discuss] ...