DataTable在ajax上的应用

最新推荐文章于 2021-08-06 03:01:41 发布

上都之战~常遇春

最新推荐文章于 2021-08-06 03:01:41 发布

阅读量3.2k

点赞数 2

分类专栏：插件文章标签：插件 DataTable ajax java

本文链接：https://blog.csdn.net/CSxiaoyuhan/article/details/77866119

版权

插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DataTables 我的网盘地址（包括demo）：链接：http://pan.baidu.com/s/1chLkUM密码：bejv

这里边只复用插件，其他的都不需要

需要用到的插件：

dataTables.min.css、jquery-2.1.0.min.js

jquery.dataTables.min.js 这些都可以在我的网盘中或这自己下载的插件中找到

Tjxfxx2.js 自己设置

Html中配置index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>信访接口采集</title>
<!-- 静态页面js引用 -->
<script type="text/javascript" src="DataTables-1.10.2/js/jQuery%20v1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.2/css/jquery.dataTables.min.css" media="all" />
<script type="text/javascript" src="DataTables-1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/mjjd/Tjxfxx2.js"></script>
<style type="text/css">  /* 设置表格的css样式 */
.xftb{
    width:90%;
    height: 40%;
    margin:0 auto;
    position:relative;
    padding-top: 20px;
}
/*设置表格的第一列的宽度*/
 .xftb table tbody tr:first-child td:first-child {
    width: 400px;
}
</style>
</head>
<body>
	<div class="xftb">
		<table id="XfbsTable">
		<thead>
        <tr>
            <th>信访标识</th>
            <th>采集开始时间</th>
            <th>采集结束时间</th>
            <th>信访形式代码</th>
            <th>信访形式名称</th>
            <th>入库状态</th>
        </tr>
    </thead>
		</table>
	</div>
</body>
</html>

Tjxfxx2.js

var dataObject = [];
$(function() {
	getXfbsTable();
});
// 信访数据table
function getXfbsTable() {
	dataObject = [];
	$.ajax({
				type : 'post',
				url : '/xfjkcj/getXfbsTable',
				dataType : 'json',
				async : true,
				beforeSend:function(){
					$("#loading").show();
				},
				success : function(datalist) {
						 dataObject = datalist;
						//此处返回的json格式类型是List<Map<String,Object>>
						console.log(dataObject);
						//目的是为了解决重复加载原数据不改变问题（需要两个DataTable，并且得在第二个添加destroy）
						$('#XfbsTable').dataTable({
							"bAutoWidth": true,  //自动设置宽度
							"bScrollCollapse": false, //滚动条关闭
						    bRetrieve: true,//去掉错误提示
						});
						$('#XfbsTable').DataTable({
							"destroy": true,
							"bLengthChange": false,   //去掉每页显示多少条数据方法
							data:dataObject,
							/*给数据添加列*/
							columns:[
							    {data:'xfbs'}, 
							    {data:'kssj'},
							    {data:'jssj'}, 
							    {data:'xfxsdm'},
							    {data:'xfxsmc'},
							    {data:'state'}
							  ],
							  /*国际化语言*/
							  language : {
									"sProcessing" : "处理中...",
									"sLengthMenu" : "显示 _MENU_ 项结果",
									"sZeroRecords" : "没有匹配结果",
									"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
									"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
									"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
									"sInfoPostFix" : "",
									"sSearch" : "搜索:",
									"sUrl" : "",
									"sEmptyTable" : "表中数据为空",
									"sLoadingRecords" : "载入中...",
									"sInfoThousands" : ",",
									"oPaginate" : {
										"sFirst" : "首页",
										"sPrevious" : "上页",
										"sNext" : "下页",
										"sLast" : "末页"
									},
									"oAria" : {
										"sSortAscending" : ": 以升序排列此列",
										"sSortDescending" : ": 以降序排列此列"
									}
								}, 
						});
						
				},
				complete:function(){
					$("#loading").hide();
				},
				error : function(resource) {
					console.log("ajax请求出错了");
				}
			});
}

上都之战~常遇春

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
DataTable在ajax上的应用

DataTables 我的网盘地址（包括demo）：链接：http://pan.baidu.com/s/1chLkUM密码：bejv这里边只复用插件，其他的都不需要需要用到的插件：dataTables.min.css、jquery-2.1.0.min.jsjquery.dataTables.min.js 这些都可以在我的网盘中或这自己下载的插件中找到Tjxfxx2.js 自己
复制链接

扫一扫