datables的基本操作

时间：2017-01-11 11:54:19 阅读：813 评论：0 收藏：0 [点我收藏+]

标签：his boot log 设置 var hover nes 四舍五入 lsp

<%@ 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>

$(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的基本操作

标签：his boot log 设置 var hover nes 四舍五入 lsp

原文地址：http://www.cnblogs.com/husfsh-16300/p/6273003.html

踩

(1)

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行