首页 > 代码库 > datables的基本操作
datables的基本操作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- views/component/commomOpinion/opinionList.jsp -->
<%@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" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<title>常用意见列表</title>
<link rel="stylesheet" href="http://www.mamicode.com/${UI_FRAME_PATH}/data-tables/1.10.5/extensions/styling/bootstrap/dataTables.bootstrap.css">
<link href="http://www.mamicode.com/${UI_FRAME_PATH }/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" rel="stylesheet" >
<link href="http://www.mamicode.com/${CSS_PATH }/jquery-ui.css" type="text/css" rel="stylesheet" />
<link href="http://www.mamicode.com/${CSS_PATH }/mstyle.css" type="text/css" rel="stylesheet" />
<link href="http://www.mamicode.com/${CSS_PATH }/font-awesome.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.mamicode.com/${UI_FRAME_PATH}/data-tables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/${UI_FRAME_PATH}/data-tables/1.10.5/extensions/styling/bootstrap/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/${UI_MODULES_PATH}/uniflow/autoRefresh.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/${UI_MODULES_PATH}/uniflow/tools.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/${STATIC_RESOURCES_PATH }/webSrv-potal/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/${JS_PATH }/myopinion/myopinion.js"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 10px">
<div class="row-fluid">
<div class="span12" id="content">
<div class="row-fluid">
<div class="span12">
<div class="btn-toolbar">
<div class="pull-right">
<div class="input-append">
<input type="text" placeholder="模糊查询" id="fuzzy-search-content" style="height: 33px;border-radius: 4px 4px 4px 4px;">
<div class="btn-group">
<button type="button" class="btn" id="fuzzy-search"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-w" id="btn-add"><i class="fa fa-plus"></i> 添加</button>
<button type="button" class="btn btn-primary btn-w" id="btn-alldel"><i class="fa fa-remove"></i> 批量删除</button>
</div>
</div>
</div>
<div class="block info-block" id="user-view" style="display:none;">
<div class="block-content info-content clearfix">
<div style="float:left;">
<label class="prop-name">意见:</label>
<input type="text" id="opinion-edit" style="width:280px;height: 33px;border-radius: 4px 4px 4px 4px;" name="extn-add" />
</div>
<div class="pull-right" >
<button type="button" class="btn btn-primary btn-w" id="opinion-edit-save" >保存</button>
</div>
</div>
</div>
<div class="block info-block" id="user-add" style="display:none;">
<div class="block-content info-content clearfix">
<form id="form-add" style="margin:0px;padding:0xp;">
<div style="float:left;">
<label class="prop-name">意见:</label>
<input type="text" id="opinion-add" style="width:280px;height: 33px;border-radius: 4px 4px 4px 4px;" name="extn-add" />
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary btn-w" onclick="saveAddopinion()" id="btn-save-add">确定添加</button>
<button type="button" class="btn btn-cancel" onclick="cancelAddopinion()" >取消</button>
</div>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span12" id="div-table-container">
<table class="table table-striped table-bordered table-hover table-condensed" id="draftTaskTable" cellspacing="0" width="100%">
<thead>
<tr>
<th width="10px">
<input type="checkbox" name="cb-check-all" id="cb-check-all">
</th>
<th width="40px" >序号</th>
<th>意见</th>
<th >操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
$(document).ready(function() {
var table = $(‘#draftTaskTable‘).DataTable();//draftTaskTable为jsp中的table的id
table.state.clear();//清除原来状态
initTable();
});
var _dataTablesInstance = undefined;
function initTable(ext) {
var numCount = 1;
var option = {
"bPaginate": true,//一行显示条数选择器 两个配合
"bLengthChange": true,//一行显示条数选择器 两个配合
"aLengthMenu": [5, 10, 15, 20, 25],//页脚的下拉选择显示数据行数的设置
"bStateSave":true, //开关，是否打开客户端状态记录功能,记录原来一页展示多少条记录
"bFilter": false,//去掉默认搜索框
"bSort": false,//排序
"bJQueryUI": false,
"iDisplayLength": 5,//页面的显示个数pagesize
"bAutoWidth": true, //自适应宽度
"sPaginationType" : "full_numbers",//详细分页组，可以支持直接跳转到某页
//"sAjaxDataProp" : "aData",
"bDestroy" : true,
"bProcessing" : true,//显示进度条
"bServerSide" : true,//服务端分页
"sDom" : "rt<‘bottom‘ilp<‘clear‘>>",
"sAjaxSource" : FRAMEWORK_BASE_PATH+"/myopinion/getOpinionList", //加载数据的action路径
"sServerMethod": "POST",
"aoColumns": [
{ "mData": null ,"mRender":function(data,type,full){//数据的初始化，要和table的thead中的列数相同
return ‘<input type="checkbox" id=‘+data.id+‘ class="iCheck" name="choseCheck">‘;
}
},
{"mData": null,"targets": 0},
{ "mData": "opinionName" },
{ "mData": null ,"mRender":function(data,type,full){
return ‘<button type="button" class="btn btn-small" id="moveUp">上移</button> <button type="button" id="moveDown" class="btn btn-small">下移</button> ‘+
‘ <button type="button" class="btn btn-small" id="btn-del">删除</button> <button type="button" class="btn btn-small" id="btn-edit">修改</button>‘;
}
}
],
//去掉空值报错信息，避免显示为null
"aoColumnDefs" : [ {
sDefaultContent : ‘‘,
aTargets : [ ‘_all‘ ]
} ],
"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 = http://www.mamicode.com/{
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();*/
}
}
});
}
function cancelAddopinion(){
$("#user-add").hide();
}
var userManage = {
currentItem : null,
addItemInit : function() {
$("#user-add").show().siblings(".info-block").hide();
},
editItemInit : function(item) {
if (!item) {
return;
}
$("#user-view").show().siblings(".info-block").hide();
$("#opinion-edit").val(item.opinionName);
},
editItemSubmit : function() {
var opinionName = $("#opinion-edit").val();
var opinionId = userManage.currentItem.id;
$.ajax({
url:FRAMEWORK_BASE_PATH+"/myopinion/updateOpinion",
type:"post",
dataType:"json",
data:{
"opinionName":opinionName,
"opinionId":opinionId
},
success:function(json){
$("#user-view").hide();
if(json.result== true){
editFresh();
}
}
});
},
deleteItem : function(selectedItems) {
var message;
var sendDate="";
var sendUrl;
if (selectedItems&&selectedItems.length) {
if (selectedItems.length == 1) {
message = "确定要删除 ‘"+selectedItems[0].opinionName+"‘ 吗?";
sendDate = selectedItems[0].id;
console.log(sendDate);
sendUrl = FRAMEWORK_BASE_PATH+"/myopinion/deleteOpinion";
}else{
message = "确定要删除选中的"+selectedItems.length+"项记录吗?";
for(var i=0;i<selectedItems.length;i++){
sendDate +=selectedItems[i].id +","
}
sendUrl = FRAMEWORK_BASE_PATH+"/myopinion/batchDeleteOpinion";
$("#cb-check-all").attr("checked",false);
}
if(!confirm(message)){
return;
}
$.ajax({
url:sendUrl,
type:"post",
dataType:"json",
data:{
"opinionId":sendDate
},
success:function(json){
if(json.result== true){
$("#user-view").hide();
editFresh();
return;
}
}
});
}else{
alert(‘请先选中要操作的行‘);
}
},
moveItem : function(selectedItems,moveWay) {
$.ajax({
url:FRAMEWORK_BASE_PATH+"/myopinion/moveOpinion",
type:"post",
dataType:"json",
data:{
"opinionId":selectedItems.id,
"opinionName":$("#fuzzy-search-content").val(),
"moveWay":moveWay
},
success:function(json){
var message = json.message;
if(json.result== false){
if(message=="已是最上一行!" || message=="已是最后一行!"){
alert(message);
}
}
if(json.result== true){
editFresh();
}
}
});
},
searchItemInit:function(){
$("#draftTaskTable").DataTable().page(0).draw( false );
}
};
function editFresh(){
var tableSetings=$(‘#draftTaskTable‘).dataTable().fnSettings()
var paging_length=tableSetings._iDisplayLength;//当前每页显示多少
var page_start=tableSetings._iDisplayStart;//当前页开始
var pagenum=Div(page_start,paging_length);
$("#draftTaskTable").DataTable().page(pagenum).draw( false );
}
function Div(exp1, exp2) { //整除
var n1 = Math.round(exp1); //四舍五入
var n2 = Math.round(exp2); //四舍五入
var rslt = n1 / n2; //除
if (rslt >= 0) {
rslt = Math.floor(rslt); //返回小于等于原rslt的最大整数。
}
else {
rslt = Math.ceil(rslt); //返回大于等于原rslt的最小整数。
}
return rslt;
}
datables的基本操作