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在.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语句,你可以给它传递零个或多个用逗号隔开的表达式. ...

随机推荐

UITabelview的删除
删除的效果 Automatic Bottom Fade left middle none right top 简单删除先删除数据源里的数据,然后再删除cell,否者会报错 let indexPath ...
floor()函数向下取整 ceil()函数向上取整
floor(x) is the largest integer not greater than x , 也就是,floor(x) 返回的是小于等于x的所有整数中最大的整数,简单的说,就是去掉x的小 ...
AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖-转
http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖标签: ...
getResourceAsStream和getResource的用法
用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大家最经常用的,就是用JAVA的File类,如要取得 D:/test.txt文件,就会这样用File file ...
负载均衡,最理想使用 redis实现session共享
负载均衡在多台php服务器负载均衡的情况下,第一秒请求是a服务器,第二秒请求是b服务器, session必须放在一个公共的服务器,最理想是使用 redis实现session共享.内存的速度比磁盘访问快 ...
Notepad++中调试用心lua程序
一.配置: 1.打开Notepad++: 2. 按下F5,或者打开Run->Run… 3. 弹出Run的窗口 3. 这一步是最关键的,将下列语句拷贝粘贴至输入框中:cmd /k Python & ...
LeetCode 392. Is Subsequence
Given a string s and a string t, check if s is subsequence of t. You may assume that there is only l ...
scip学习
最近在学习scip 准备把里面比较有价值的题分别用lisp和c语言写出来.这样或许能更加深入的理scheme的函数式编程. tip:我用的c语言环境是vs2015,lisp环境为Drracket;
Windows 下 Apache HTTP Server 与 Tomcat 的整合
整合准备: 1.Apache HTTP Server(下文用Apache简称) 2.Tomcat 7或8 3.mod_jk.so (tomcat-connectors)-这个文件是用来链接http s ...
Js的Url中传递中文参数乱码的解决
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: 2. 接收参数页面:test02.html 二:如何获取Url& ...

datables的基本操作

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

随机推荐

热门专题