DataTable在ajax上的应用

来源：互联网发布：天猫淘宝商城男装编辑：程序博客网时间：2024/05/21 20:23

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();});// 信访数据tablefunction 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请求出错了");}});}

阅读全文

1 0