jquery-dataTable服务端分页+搜索功能实现+每栏数据修改+ dataTable对象销毁和刷新数据

var queryUrl = "this mapper url";
var dataTableLanguage = {
	"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
	"sZeroRecords": "抱歉, 沒有找到",
	"sInfoEmpty": "沒有數據",
	"sInfo": "顯示 _START_ 至 _END_ 條   共 _TOTAL_ 條",
	"sInfoFiltered": "(從 _MAX_ 條數據中檢索)",
	"oPaginate": {
	    "sFirst": "首頁",
	    "sPrevious": "上一頁",
	    "sNext": "下一頁",
	    "sLast": "尾頁"
	 },
	 "sZeroRecords": "沒有檢索到數據",
};
// 渲染表格
var tableObj = $(".table-sort").dataTable({
	"searching": false, // 是否開啟默認的查詢條件輸入框
    "serverSide": true, // 服務端分頁
    "fnPageChange":"next", // 换页方法,可以跳转到指定页。可选参数有"first", "previous", "next" , "last",或者是一个整数,0是第一页
    "bProcessing": true, // 当表格在处理的时候(比如排序操作)是否显示“处理中...”,默認false
    "bPaginate": true, // 是否允许终端用户从一个选择列表中选择分页的页数
    "aLengthMenu":[10,20,30,40,50,100], //每页显示的记录数,供用戶選擇
    "bLengthChange": true, // 是否显示每页大小的下拉框
    "bFilter": true, // 过滤功能
    "bSort": true, // 排序功能
    "aaSorting": [9,"desc"],// 設置初始化时默认一列来排序
    "sPaginationType":"full_numbers", // 分頁組件的樣式,具體樣式參考 https://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html
    "ajax":{
    	"url":queryUrl,// 請求的URL
    	"type":"post",
    	"data":function(data){ // 提交到後台的參數,內容很多,如要獲取所有,請直接return data就行了,具體請遍歷data對象或用瀏覽器F12網絡,參數中查看
      	    var param = {};
     	    var columnIndex = data["order"][0]["column"]; // 獲取鼠標點擊列名的下標
    	    param.start = data["start"]; // 數據的開始位置
    	    param.length = data["length"]; // 每頁顯示的數量
    	    param.order = data["order"][0]["dir"]; // 排序規則 DESC或ASC
    	    param.orderField = data["columns"][columnIndex]["data"]; // 根據下標獲取排序列名的名稱
    	    param.search = data["search"]["value"]; // 搜索框的文本內容,searching如果不為true,則就是默認空串    	
    	    param.mySearch = $("#search").val();
    	    return param;
    	}
    }, 
    "fnDrawCallback": function (oSettings) { 
    	var json=jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式 直接可以拿到json 之后进行处理 
    	//console.log(json);//此处json就是返回的数据 
    	$("#showspan").text(json.iTotalDisplayRecords);
    	
    },
    "oLanguage": dataTableLanguage,// 界面显示文字,默认是英文
    "aoColumns": [
	      {"data": "uid","sDefaultContent":"","bVisible":true,"bSortable":false,// uid後台返回的JSON對象的屬性名,sDefaultContent當後台數據為null時,顯示的默認值,bVisible前端是否顯示這個欄位,默認true,bSortable設置此列不參與排序操作
	    	  // 自定義渲染結果
	    	  "render":function (data, type, full, meta) {
	    		  return "<input type='checkbox' value='"+data+"' />";
	           }
	      },
	      {"data":"factoryArea","sDefaultContent":""},
	      {"data":"buildingName","sDefaultContent":""},
	      {"data":"buildingNumber","sDefaultContent":""},
	      {"data":"businessCluster","sDefaultContent":""},
	      {"data":"departmentCode","sDefaultContent":""},
	      {"data":"area","sDefaultContent":"","required":{required:true,number:true,min:0}},
	      {"data":"buildLegalpersonCode","sDefaultContent":""},
	      {"data":"buildLegalperson","sDefaultContent":""},
	      {"data":"dataTime","sDefaultContent":"","fillVisible":true},
	      {"data":"uid","sDefaultContent":"","bSortable":false,
	    	   "render":function (data, type, full, meta) {
	    		   return "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"article_edit('编辑','../baseData/toEdit.do','"+escape(JSON.stringify(full))+"',400,500)\" href=\"javascript:void(0);\"title=\"编辑\" ><i class=\"Hui-iconfont\">&#xe6df;</i></a> <a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"article_batch_del('"+full.uid+"')\" href=\"javascript:;\" title=\"删除\"><i class=\"Hui-iconfont\">&#xe6e2;</i></a>";	    	  
	    		}
	      }
    ]
});

该框架的ajax请求的两种方式(不知道还有没有别的方式,请评论告知,谢谢)

$('#example').DataTable({
        	oLanguage:oLanguage,
        	bProcessing:true,//處理中.. 顯示
        	aaSorting:[9,"desc"]//設置初始化時默認一列來排序
==========================================================
        	ajax:{//方式一
        		url:"../base/get-service-user-info",
        		type:"post",
        		data:{"name":"張三"} //用來提交參數
        	}
===========================================================
                      //方式二
        	ajax:function(data,callback){
        		$.ajax({
        			url:'../base/get-service-user-info',
        			type:'post',
        			dataType:'json',
        			data:{"name":"張三"},//用來提交參數
        			success:function(obj){
        				callback(obj);
        			}
        		})
        	},
==========================================================
        	aoColumns:[//以上两种ajax请求都需要些该属性,方可显示
        	           {data:"NTH"},
        	           {data:"JOB_CARD"},
        	           {data:"UNAME"},
        	           {data:"UNIT"},
        	           {data:"STATION_TRAIT"},
        	           ]
        });
    });

后台处理后返回的结构

Map<String,Object> result = new HashMap<String,Object>();
		List<?> list = service.listData();
		System.out.println("是否查詢到數據:"+list.toString());
		result.put("iTotalDisplayRecords", 2);
		result.put("iTotalRecords", 2);
		result.put("data", list);

===================华丽风格线=================

dataTable 数据清理+对象销毁-->>三个要点

if(!!_dataTable){
		_dataTable.destroy();//要点1
		_dataTable.clear();//要点2
	}
	var dataSet = [ [locations[1],locations[0],auditTime,auditUser,point] ];
    _dataTable = $('#example').DataTable({
        oLanguage:oLanguage,
        bProcessing:true,//處理中.. 顯示
        aaSorting:[0,"desc"],//設置初始化時默認一列來排序
        data:dataSet,
        destroy: true,//要点3
        columns:[
			 {title:"名稱"},
			 {title:"地點"},
			 {title:"時間"},
			 {title:"稽核成員"},
             {title:"稽核要點"},
             {title:"操作","render":function(data,type,full,meta){
                 return "<a href='javascript:alert(0)'>確定</a>";
             }}
           ]
        });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值