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

随机推荐

通过Shell脚本读取properties文件中的参数时遇到\r换行符的问题
今天在编写微服务程序启动脚本的时候,遇到一个比较奇葩的问题,下面给出具体描述: 目标:通过读取maven插件打包时生成的pom.properties文件,获取里面的应用名称和应用版本号,然后拼接得到s ...
创建基本的2D场景（part2）
让我们继续来学习Unity2D游戏场景的制作,本文分为以下3个部分: · 添加角色和控制 . 添加2D物理阻挡 · 添加2D效果通过制作一个移动帽子接保龄球的小游戏,我们可以学习到任何创建游戏对象, ...
基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
MS Word 目录排版
昨天整理一份把网页的内容复制粘贴到Word里的文件,碰到了这样一个问题: 网页上面也会有一级标题,二级标题,三级标题等.当我们在写博客的时候,也会去使用这些.这也就导致复制过来之后,直接生成的目录很乱 ...
数据持久层框架iBatis, Hibernate 与 JPA 比较
在本文中我们介绍并比较两种最流行的开源持久框架:iBATIS和Hibernate,我们还会讨论到Java Persistence API(JPA).我们介绍每种解决方案并讨论其所规定的品质,以及在广泛 ...
JavaScript进阶（四）
现在说说什么是函数.函数的作用可以写一次代码,然后反复的重用这个代码.如:我们要完成多组数和的功能.var sum;sum=3+2;alert(sum); sum=7+8;alert(sum);... ...
Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
如何使用jconsole(英文)
http://docs.oracle.com/javase/6/docs/technotes/guides/management/jconsole.html
用ES6语法和方式写gulp
安装依赖模块 npm i -g gulp npm i gulp babel-core babel-preset-es2015 --save-dev 在创建文件 .babelrc(文件名) : (文件内 ...
改造jQuery-Tagit 插件支持中文全角的逗号和空格
jQuery 的 tagit 插件效果还是不错的,今天用到该插件但发现不能自定义标签分隔符,只能是英文半角逗号或空格,于是想改造下效果: 先研究了一番插件的代码,发现并不能通过插件自身的扩展方法来实 ...

datables的基本操作

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

随机推荐

热门专题