DataTable的一套增删改查js代码

var ajax_datatable=webURL("conf/pageConf/listPageConfig");   //页面列表
var ajax_project=webURL("conf/pageConf/listConfProject");	 //查询配置项目
var ajax_table=webURL("conf/pageConf/listConfTable");	// 查询页面所属表	
var ajax_one=webURL("conf/pageConf/getPageById");	// 查询页面所属表	

var ajax_saveOrUpdate = webURL( "conf/pageConf/saveOrUpdate");                   //保存更新
var ajax_delete = webURL( "conf/pageConf/delete");                   //保存更新

var page_add = pageURL("/view/config/conf.pageAdd.html");
var page_list =  pageURL("/view/config/conf.pageConfig.html");


var page_conf = pageURL("/view/config/conf.configure.html");
var page_edit = pageURL("/view/config/conf.editDevice.html");
var page_where =  pageURL("/view/config/conf.searchDevice.html");
var page_result = pageURL("/view/config/conf.resultDevice.html");
var page_button = pageURL("/view/config/conf.buttonUser.html");
var idValue;

var dataTab=[];
//配置页面
/**
 * 初始化列表界面的列表
 */
function init_dataTable() {
	$.ajax({
		url : ajax_datatable,
		type:'post',
		dataType : "json",
		success : function(ret, status, xhr) {
			var conf = {
				buttons : [{text :'添加页面',action :AddAction}],
				dom: 'Bfrtip',
				bDestroy:true,
				aaData : ret.data,
				rowId: "pageId",
				aoColumns : columns,
				oLanguage : DTable_oLanguage
			}
			table = $('#table').DataTable(conf);
		}
	})
	
}

//添加页面
function AddAction($elem) {
	document.location.href = page_add;
}


var validationOptions={
	    message: 'This value is not valid',
	    feedbackIcons: {
	        valid: 'glyphicon glyphicon-ok',
	        invalid: 'glyphicon glyphicon-remove',
	        validating: 'glyphicon glyphicon-refresh'
	    },
	    fields: {
	    	pageName: {
	            message: '名称输入不正确',
	            validators: {
	                notEmpty: {
	                    message: '名称不能为空'
	                }
	            }
	        }
	    }
	};

/**
@ignore 操作按钮
 */
var columns =  [
    {defaultContent:'',mData:null,sWidth:5,orderable:false,sTitle:"序号",render : function(data, type, row, meta) {
                    // 显示行号
                    var startIndex = meta.settings._iDisplayStart;
                    return startIndex + meta.row + 1;
     } ,className:'edit-btn'},
	{sDefaultContent:"",mData:"pageId",sWidth:5,sTitle:"ID",bVisible: true},
	{sDefaultContent:'',mData:"projectId",sWidth:5,sTitle:"项目ID",bVisible: false},
	{sDefaultContent:'',mData:"projectCode",sWidth:5,sTitle:"项目编码",bVisible: false},
	{sDefaultContent:'',mData:"projectName",sWidth:5,sTitle:"项目","visible":false},
	{sDefaultContent:'',mData:"id",sWidth:5,sTitle:"表id",bVisible: false},
	{sDefaultContent:'',mData:"tableName",sWidth:5,sTitle:"表名",bVisible: false},
	{sDefaultContent:'',mData:"tableNameZh",sWidth:5,sTitle:"表名称"},
	{sDefaultContent:"",mData:"pageName",sWidth:5,sTitle:"页面名称"},
	{sDefaultContent:'',mData:"pageType",sWidth:5,sTitle:"页面类型",render:function(data,type,row,meta){
	    return data==1 ? "编辑" : (data==2 ? "结果" : (data==3?"查询及结果":data))
        }},
	{sDefaultContent:"",mData:"useFormByRecordType",sWidth:5,sTitle:"根据记录属性确定编辑界面"},
	{sDefaultContent:'',mData:"isPagination",sWidth:5,sTitle:"分页方式",render:function(data, type, row,   meta){
		if(row.pageType==1){
			return "";
		}
    	if(data==1){
    		return "后台分页"
    	}else{
    		return "前端分页"
    	}
    }},
	{sDefaultContent:"",mData:"cssContainer1",sWidth:5,sTitle:"第一层DIV样式",bVisible: false},
	{sDefaultContent:'',mData:"cssContainer2",sWidth:5,sTitle:"第二层DIV样式",bVisible: false},
	{sDefaultContent:'',mData:"isShowTitle",sWidth:5,sTitle:"页面标题",bVisible: false,render:function(data, type, row,   meta){
    	if(data==1){
    		return '显示'
    	}else{
    		return '不显示'
    	}
    }},
	{sDefaultContent:'',mData:"remark",sWidth:5,sTitle:"说明"},
	{sDefaultContent:'',sWidth:180, "title":"配置", "orderable": false, "searchable": false, "sClass":"text-left","render" : function ( data, type, row, meta) {
		if(row.pageType==1){
			return  '<button class="edit1">配置编辑</button>';
		}else if(row.pageType==2){
			return  '<button class="edit2">配置结果</button><button class="editBtn">操作按钮</button>';
		}else{
			return  '<button class="edit2">配置结果</button><button class="edit3">配置查询</button><button class="editBtn">操作按钮</button>';
		}
	}},
	{sDefaultContent:'',sWidth:60, "title":"操作", "orderable": false, "searchable": false,"render" : function ( data, type, row, meta) {	
			return  '<button class="edit">编辑</button><button class="delete">删除</button><button class="configure">配置</button>';
	}}
	//{sDefaultContent:[Btn.edit,Btn.del].join(""),mData:"",sWidth:100,bSortable:false,sTitle:DTable_Title_Oper}
];  


/**
 * 编辑界面加载数据
 */
function DForm_loadData(before, after) {
	if (idValue) {
		var data = {};
		data["pageId"] = idValue;
		$.post(ajax_one, data, function(ret) {
			var data = ret.data;
			if (before && typeof before == "function") {
				before(data)
			}

			$('#defaultForm').setForm(data)

			if (after && typeof after == "function") {
				after(data)
			}
		})
	}
}

/**
 * 编辑界面加载数据
 */
function init_loadData(){
	idValue =getUrlParam("id");	
	//配置项目
	$.post({
		url : ajax_project,
		async:false,
		success:function(ret){
			var data = [];
			for(var i=0; i<ret.data.length; i++){
				data.push({"id":ret.data[i]["projectId"],"text":ret.data[i]["projectName"]});
			}			
			var sel2 = $('#projectId').select2({data:data,allowClear:false});			 			
		},
		dataType : 'json'
	});
	
	//页面所在表
	$.post({
		url : ajax_table,
		async:false,
		success:function(ret){
			 dataTab = [];
			for(var i=0; i<ret.data.length; i++){
				var rowData = ret.data[i];
				var tableDef = {"id":rowData["id"],"text":rowData["tableNameZh"],"name":rowData["tableName"]};
				dataTab.push(tableDef);
                dataTab[rowData["id"]] = tableDef;
			}		
			$('#tableName').val(dataTab[0].name);
			var sel2 = $('#id').select2({data:dataTab,allowClear:false});			 			
		},
		dataType : 'json'
	});
	DForm_loadData(function(){
		$("#title").text("修改")
	})
}


/**
 * 编辑界面验证设置
 */
function init_Validation(){
	$('#defaultForm').bootstrapValidator(validationOptions).on('success.form.bv', DForm_submitData);
}

/**
 * 编辑界面提交数据
 * 
 * @param {}
 *            e
 */
function DForm_submitData(e) {
	e.preventDefault();
	var $form = $(e.target);
	var bv = $form.data('bootstrapValidator');
	var data = $form.serialize();
	var idValue = $("input[data-id]").attr("data-id");	
	$.post(ajax_saveOrUpdate, data, function(ret) {
		if (ret.code == AJAX_OK) {
			Msg.ok(ret.message);
			document.location.href=page_list;
		} else {
			Msg.fail(ret.message || "发生错误")
		}
	}, 'json');
}
$("#table").on("click",".edit",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	   idValue = data["pageId"];
	  document.location.href=page_add + "?id="+idValue;
})

$("#table").on("click",".delete",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	  $.ajax({
			url :ajax_delete,
			data:{pageId:data["pageId"]},
			dataType : "json",
			success : function(ret) {
				if (ret.code == AJAX_OK) {
					Msg.ok(ret.message);
					document.location.href=page_list;
				} else {
					Msg.fail(ret.message || "发生错误")
				}
			}
		})
})



$("#table").on("click",".configure",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	  var id = data["pageId"];				//页面id	  
	  document.location.href=page_conf + "?id="+id;
})


$("#table").on("click",".edit1",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	  var id = data["pageId"];				//页面id
	  var tableid=data["id"];				//表id
	  var pcode=data["projectCode"];		//项目编码
	  var pageName=data["pageName"];		//页面标题
	  document.location.href=page_edit + "?id="+id+"&tableid="+tableid+"&project="+pcode+"&pageName="+pageName;
})

$("#table").on("click",".edit2",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	  var id = data["pageId"];
	  var tableid=data["id"];
	  var pcode=data["projectCode"];
	  var pageName=data["pageName"];
	  document.location.href=page_result + "?id="+id+"&tableid="+tableid+"&project="+pcode+"&pageName="+pageName;
})

$("#table").on("click",".edit3",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	  var id = data["pageId"];
	  var tableid=data["id"];
	  var pcode=data["projectCode"];
	  var pageName=data["pageName"];
	  document.location.href=page_where + "?id="+id+"&tableid="+tableid+"&project="+pcode+"&pageName="+pageName;
})

$("#table").on("click",".editBtn",function(){
	  var row=table.row($(this).parents("tr"));
	  var data = table.row(row).data();
	  var id = data["pageId"];
	  var tableid=data["id"];
	  var pageName=data["pageName"];
	  document.location.href=page_button + "?id="+id+"&tableid="+tableid+"&pageName="+pageName;
})

$('#id').change(function(){ 
	$('#tableName').val(dataTab[$(this).val()].name);
});