建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery数据表格插件jquery.dataTable.js

来源:易助科技网浏览量:15收藏

简介

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类型
styletable样式设置,可自行编写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
columnsColumnName绑定的字段名,必须与返回数据字段对应,自定义列可不设置该属性非按钮列必选,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);} 与双击单击事件用法一致


使用

1.  引入文件


<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery.dataTable.js"></script>


2.  HTML


<table id="table"></table>


3.  调用


$("#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