jquery.dataTable.js是一款JQuery数据表格插件。
配置项:
配置项 | 说明 | 选项 | |
debug | 是否开启调试模式,默认关闭 | 可选,bool类型,false-true | |
method | 发送数据请求的方式,默认使用GET方式请求 | 可选,string类型,get-post | |
serial | 表格是否生成序号,默认生成序号 | 可选,bool类型,false-true | |
check | 行是否开启复选框,默认关闭 | 可选,bool类型,false-true | |
pageCapacity | 页码容量,一页显示数据的条数,默认为10行 | 可选,int 正整数 | |
loading | 是否显示加载动画,默认加载 | 可选,bool类型,false-true | |
url | 返回数据的URL地址,返回数据为json格式,不填写只能生成表头 | 必选,string类型 | |
style | table样式设置,可自行编写css样式,多项,格式{"font-size": "12px", "width": "800px"} | 可选,object类型 | |
align | 内容停靠方向,默认靠向左 | 可选,string类型center , left , right | |
ButtonStyle | 按钮部件风格,按钮背景色与字体颜色,两项,格式{fontColor:"#ffffff",backgroundColor:"#10AA9C"},默认黑色 | 可选,object类型 | |
oddEven | 奇偶行样式,开启后显示样式区别奇偶行,默认开启 | 可选,bool类型,false-true | |
sign | 行选中标记,开启后点击行选中显示标记,风格与ButtonStyle的backgroundColor一致,默认开启 | 可选,bool类型,false-true | |
columns | ColumnName | 绑定的字段名,必须与返回数据字段对应,自定义列可不设置该属性 | 非按钮列必选,string类型 |
title | 显示的表头列名 | 必选,string类型 | |
width | 列宽 | 可选,int 正整数 | |
button | 自定义按钮功能列,设置按钮名为此按钮标识,自定义列可必选设置该属性,自定义按钮列不需设置ColumnName | 按钮列必选,string类型,英文(与事件绑定) | |
buttonName | 自定义按钮功能列,显示的按钮名,自定义列可必选设置该属性,自定义按钮列不需设置ColumnName | 按钮列必选,string类型 |
事件:
事件名 | 说明 | 使用方法 |
Click | 行单击事件,返回该行数据 | Click: function (row){alert(row.id);}使用row.返回数据字段可获得数据,列未显示也可获得数据 |
doubleClick | 行双击击事件,返回该行数据,该双击事件不触发单击事件 | 设置doubleClick: function (row){alert(row.id);}使用row.返回数据字段可获得数据,列未显示也可获得数据 |
自定义Click | 点击按钮,返回该行数据,设置的button为del 则事件为delClick | 设置 自定义Click:function (row) {alert(row.id);} 与双击单击事件用法一致 |
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery.dataTable.js"></script>
<table id="table"></table>
$("#Table").dataTable({
debug: true,
check: true,
pageCapacity:15,
loading:false,
oddEven:false,
url: "data.php",
style: {"font-size": "12px", "width": "800px"},
align:"center",
ButtonStyle:{fontColor:"#ffffff",backgroundColor:"#10AA9C"},
columns: [
{ColumnName: "id", title: "ID", width: 30},
{ColumnName: "name", title: "视频名", width: 500},
{ColumnName: "img", img:true, title: "图片", width: 40},
//img:true,后台数据反回图片url这一列就生成图片显示
{title: "查看", button: "show", buttonName: "查看", width: 50},
//自定义的按钮
{title: "编辑", button: "edit", buttonName: "编辑", width: 50},
//自定义的按钮
{title: "删除", button: "del", buttonName: "删除", width: 50}
//自定义的按钮
],
Click: function (row) {
//内置事件行单击
alert("单击:"+row.id);
},
doubleClick: function (row) {
//内置事件行双击事件
alert("双击:"+row.id);
},
editClick: function (row) {
//自定义按钮事件,事件名是上面设置的按钮名+Click
alert("自定义编辑:"+row.id);
},
delClick: function (row) {
alert("自定义删除:"+row.id);
},
showClick: function (row) {alert("自定义查看:"+row.name);}
});
官网地址:https://datatables.net/
Gitee 地址 :https://gitee.com/PoppinRubo/jquery.dataTable