DataTable

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

官网: https://datatables.net/

中文网: http://www.datatables.club/

用法:

先从最简单的开始:导入导入dataTable需要的js与css

- css http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
- js http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

HTML

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead> <tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

Js : 初始化表格

$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );

这是使用Ajax的例子,知道的朋友都知道现在都是使用前后端分离+Ajax返回Json数据来进行数据的传递的。dataTable支持 Ajax + Josn 的形式返回数据并解析渲染。

json : 数据格式

{ "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }

json就不多说了,另外推荐一个格式化json的网站,蛮好用的 https://www.bejson.com/

完整案例:

<table id="table" class="table table-bordered table-hover">
<thead>
<th width="10%">成交编号</th>
<th width="5%">签约人</th>
<th width="5%">买方</th>
<th width="5%">卖方</th>
<th width="10%">房源信息</th>
<th width="10%">总价(元)</th>
<th width="5%">成交时间</th>
<th width="6%">状态</th>
<th width="15%">操作</th>
</thead>
<tbody> <!--tbody中的内容dataTable会自动填充-->
</tbody>
</table>
- 这里table的Id是初始化要用到的

js代码:

 var table = $("#table"); //定义表格接下来好初始化
table.dataTable({ //表格渲染开头时可以设置一些配置参数(如果你刚开始接触也可以啥都不配)
"bSort" : false, //
processing : true, //是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)
serverSide : true, //是否开启服务器模式
searching : false, //是否允许Datatables开启本地搜索
autoWidth : true, //自适应宽度
language : {
url : '/js/plugins/dataTables/language/Chinese.json' //DataTables语言配置选项
},
ajax : {
url : "/deal/getxxxList", //访问路径,返回Json数据
data : function(d) { //传递参数
rowCode1 = 0;
planify(d);
d.timeStart = $("#timeStart").val();
d.timeEnd = $("#timeEnd").val();
d.departmentId = $(
"#selectDepartment option:selected").val();
d.price = $("#selectPrice option:selected").val();
d.keywords = $("#keywords").val();
d.dealStatus = $(
"#selectDealStatus option:selected").val();
d.paidStatus = $(
"#selectPaidStatus option:selected").val();
d.alreadySplit = $(
"#selectAlreadySplit option:selected")
.val();
},
type : "POST" //设置请求类型
},
columnDefs : [ { //设置列定义初始化属性
"defaultContent" : "", //为列设置默认的静态内容
"targets" : "_all" //指定所有列
} ],
columns : [ //数据渲染,固定格式,下面每一个对应表格一个td
{
"name" : "dealCode", //后台返回json数据 这是名
"data" : "dealCode" //这是值,一定要对应
},
{
"name" : "dealUserName",
"data" : "dealUserName"
},
{
"name" : "custName",
"data" : "custName"
},
{
"name" : "ownerName",
"data" : "ownerName"
},
{
"name" : "houseSource",
"data" : function(row) { //这是第二种写法,运用场景是你要做判断写js的时候可以这样写
//这个"row"就是数据源,可以通过 row.xx来获取json返回的数据,名字要对上
var projectStr = ""; if (typeof (row.projectName) == "undefined" && row.houseSourceProject == undefined) {
return "";
}
var buildArea = "";
if (parseInt(row.buildArea) > 0) {
buildArea = row.buildArea;
}
//优先取楼盘名称
if(row.houseSourceProject != undefined && row.houseSourceProject != ""){
projectStr = row.houseSourceProject;
}else if(row.projectName != undefined && row.projectName != ""){
projectStr = row.projectName;
}else{
projectStr = "";
}
return projectStr + " " + buildArea + "㎡"; // 返回的值就是表格td的值
}
},
{
"name" : "dealPrice",
"data" : "dealPrice"
},
{
"name" : "dealTimeStr",
"data" : "dealTimeStr"
},
{
"name" : "dealStatus",
"data" : function(row) {
var status = row.dealStatus;
var split = row.alreadySplit;
var paid = row.paidStatus;
var s1 = "";
var s2 = "";
var s3 = "";
if (status == 0) {
s1 = "未审核<br>";
} else if (status == 1) {
s1 = "已审核<br>";
} else if (status == 2) {
s1 = "已作废<br>";
} else {
s1 = "<br>";
}
if (split == 0) {
s2 = "未分配<br>";
} else if (split == 1) {
s2 = "已分配<br>";
} else {
s2 = "<br>"
}
if (paid == 1) {
s3 = "已回款";
} else if (paid == 0) {
s3 = "未回款";
} else if (paid == 2) {
s3 = "部分回款";
}
return s1 + s2 + s3;
}
},
{
"name" : "doElse",
"data" : function(row) {
var html = "<table><tr>"; if (row.dealStatus == 0) {
html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",1,\"" + row.dealCode +"\")' dealId='"+row.dealId+"'><span>查看</span></a></td>";
} else if (row.dealStatus == 1) {
html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",2,\"" + row.dealCode +"\")'><span>查看</span></a></td>";
if (row.paidStatus != 1) {
html += "<td><a data-toggle='modal' onclick='toGetPaid("
+ row.dealId
+ ")' data-target='#myModal3' class='btn-xs btn btn-outline btn-light'>收款</a></td>";
}
html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' onclick='preview("+row.dealId+",\"" + row.dealCode +"\")'>业绩确认单</a></td>";
} else {
html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",2,\"" + row.dealCode +"\")' dealId='"+row.dealId+"'><span>查看</span></a></td>";
}
html += "<td><a onclick='deleteDealDetail("
+ row.dealId
+ ")' class='btn-xs btn btn-outline btn-light'>删除</a></td>";
html += "</tr></table>";
return html;
}
} ]
});

注意的几个点:我刚开始做的时候也是一脸懵b的。

  • 不止我这一种写法,有很多种写法,我这种的应用场景适用于 Ajax + json 数据来做。(我也只会这一种,我一个写后台的我容易吗)
  • 参数配置丰富到你想吐,文档都在官网中有,我还是写出来吧:http://www.datatables.club/reference/option/
  • 数据一定要对上,少一个都不行,你表格中写了多少个th,你在columns中就要写多少个。

其实非常的简单,只要你的数据个数能够对的上并且后台数据是标准json格式,你没有打错的话,都是没毛病的。

顺便讲讲dataTable的分页:

@RequestMapping(value = "getXXXList", produces = "text/html;charset=UTF-8")
@ResponseBody
public String getOldHouseList(HttpServletRequest request, DataTableFormVo vo) {
//注意这个 DataTableFormVo 参数这个参数是用来接收dataTable传递过来的一个vo对象,其中就包括分页必须的两个参数,第几条到第几条,再利用mysql的limit进行分页就很简单了 //业务代码就不写了
return resultVo.toString();
}

到这里就发现,dataTable不是自带分页吗,怎么还要用limit了

这么说你就明白了,dataTable自带的分页不是物理分页,如果我有一千万条数据不就嗝屁了,所以我们还是乖乖的用物理分页吧。

刚刚开始写博客,可能写的很粗糙,感谢你能看到这里。

DataTable的Ajax使用的更多相关文章

  1. datatable 的ajax修改参数,post可以传参处理

          datatables常用参数记录 {                "searchable": false,                "orderabl ...

  2. datatable 多字段 排序;

    没有找到datatable的排序方面运用案例,根据接口,自己实现 所以记录一二,小伙伴们有更好的方法,欢迎讨论 1.需求图  2.需求 1)默认 未开启 灰色下箭头 2)第一次点击 :启动排序,降序- ...

  3. Jquery DataTable基本使用

    1,首先需要引用下面两个文件 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css ...

  4. jquery datatable的详细用法

    1,首先需要引用下面两个文件 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css ...

  5. datatable详解(angular-datatable)+后台分页(springmvc)

    datable常规配置,百度一大堆 function prepareDatatable(selector, options) { var defaultOptions = { autoWidth: t ...

  6. datatable的使用

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  7. datatables中的Options总结(1)

    datatables中的Options总结(1) 最近一直研究dataTables插件,下面是总结的所有的选项内容,用了帮助学习datatables插件. 这些选项的配置在$().Datatable( ...

  8. datatables增删改查的实现

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  9. 转 Datatables中文API——基本参数

    鉴于自己一直在使用datatables,发现这是个很不错的表格插件,但是好的东西都是英文的,所以我结合自己的使用经验,把官网的英文api做下简单的翻译,同时也希望大家把自己的使用经验一起分享出来,让我 ...

随机推荐

  1. paxos ---学习笔记

    摘自维基百科:分布式系统中的节点通信存在两种模型:共享内存(Shared memory)和消息传递(Messages passing).基于消息传递通信模型的分布式系统,不可避免的会发生以下错误:进程 ...

  2. AOP编程的学习总结

    前几天听到一个同事说起AOP 然后就想学习下应用到项目中去,自己也是在网上找了很多的资料,之后发现 网上的大部分资料的内容几乎都是如出一撤,于是自己就整理了一下再加上这几天的学习总结到的知识写到这篇文 ...

  3. MVC批量上传文件

    初始图片: 选中图片后 ---------------------------------------------------------------------------------- 前端代码 ...

  4. js 日期去掉 -

    语法 stringObj.replace(rgExp, replaceText) replace 方法的语法包括下述部分: stringObj 必选项.要执行该替换的 String 对象或文字.该对象 ...

  5. .Net Core2.0中使用ADO.NET

    学习了解.NET CORE有段时间,没有用其做项目的主要原因就是这么多年积累的类库兼容问题.今天就先解决SqlHelper的兼容性: 建立类库,目标框架选择.NET Core2.0,复制粘贴代码. 问 ...

  6. 《ASP.NET MVC 5 破境之道》:概述

    第一节:写作本书的目的 关于笔者 张晓亭(Mike Cheers),1982年出生,内蒙古辽阔的大草原是我的故乡. 没有高学历,没有侃侃而谈的高谈阔论,拥有的就是那一份对技术的执著,对自我价值的追求. ...

  7. openstack 虚机迁移 Unacceptable CPU info: CPU doesn't have compatibility

    问题: Unacceptable CPU info: CPU doesn't have compatibility 解决: vim /usr/lib/python2.7/site-packages/n ...

  8. jvm(2)类的初始化(一)

    [深入Java虚拟机]之三:类初始化 类初始化是类加载过程的最后一个阶段,到初始化阶段,才真正开始执行类中的Java程序代码. 1,下面说的初始化主要是类变量的初始化,实例变量的初始化触发条件不同(一 ...

  9. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

  10. python求100以内素数

    python求100以内素数之和 from math import sqrt # 使用isPrime函数 def isPrime(n): if n <= 1: return False for ...