jquery.dataTable: jquery.dataTable v1.2.7

jquery.dataTable

jquery 数据表格

dataTable配置项

配置项		说明	选项
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类型

dataTable事件

事件名	说明	使用方法
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、引入JQ及dataTable插件


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

2、创建table


<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);
            }
        });

关于后台数据

返回的json格式(total:为数据总条数，用于分页)


{
  "total": 3744,
  "rows": [
    {
      "id": 3832,
      "name": "Haeni Kim- Falling For Someone New - Kuma"
    },
    {
      "id": 3831,
      "name": "Top Moments- A Friday Night vol. 100 (Korea)"
    },
    {
      "id": 3830,
      "name": "WAACKXXY Waacking 2017"
    },
    {
      "id": 3829,
      "name": "TRIX a.k.a. EYE X Krump 2017"
    }
  ]
}

后台需配合插件做分页设置，插件默认使用GET方式(可以设置为POST)发送page(页码)和pageCapacity(页码容量，一页显示的条数),后台需要收到这两个参数处理分页。

参照PHP版本可解析到对象,并处理输出


<?php
    $page = $_GET["page"];
    $Capacity = $_GET["pageCapacity"];
    $List = $DB->order('id desc')->limit($page, $Capacity)->select('video');
    $total = $DB->count('video');
    $rows = array();
    foreach ($List as $ListRow) {
        $rows[] = array(
            'id' => $ListRow['id'],
            'name' => $ListRow['name'],
        );
    }
    $data = array('total' => $total, 'rows' => $rows);
echo json_encode($data);
?>

以上示例仅供参考,不建议直接使用在项目。对于分页可自行封装

获取返回数据的使用方法


$('#Table').GetJSONArray();//获取Table通过URL获取到的数据，为数组类型的数据集
$('#Table').GetCheckArray();//获取当前复选框选中的值，为数组类型的数据集,未选择获取到null

刷新表格数据


$('#Table').TableRefresh();
//通过table绑定调用可以刷新当前表格数据，
//效果相当于点击了一下刷新按钮，
//要说明的是数据无变化并且没有开启loading，看着没变化并不是坏掉了

通过url实现搜索功能


//如果绑定的URL为url: "data.php",则可以通过以下方式来设置,然后后台对URL的get请求参数的处理进行表格的搜索查询
$("#Table").dataTable({
    url: "data.php?name=查询"
})
//注意事项:需要考虑到IE浏览器的情况搜索中文需要使用encodeURI进行编码,避免传到后台乱码无法查询，则使用以下方式
$("#Table").dataTable({
    url: "data.php?name="+encodeURI("查询")
})

搜索功能拉取数据PHP参考代码


<?php
function getList()
{/*拉取列表*/
    include_once('class/DB.php');
    $DB = new DB();
    $page = $_GET["page"];
    $Capacity = $_GET["pageCapacity"];
    $Query = $_GET["search"];
    $List = $DB->order('AmountID asc')->limit($page, $Capacity)->select('statistics');/*常规查询*/
    $total = $DB->count('statistics');
    if ($Query != null && $Query != "") {/*搜索内容不为空则采取模糊查询*/
        $total = $DB->where("material like '%$Query%'")->count('statistics');
        $List = $DB->order('AmountID desc')->where("material like '%$Query%'")->limit($page, $Capacity)->select('statistics');
        if (is_numeric($Query)) {/*实现ID查询判断是否为数字*/
            $total = $DB->where(array("AmountID" => $Query))->count('statistics');
            $List = $DB->order('AmountID asc')->where(array("AmountID" => $Query))->limit($page, $Capacity)->select('statistics');
        }
    }
    $rows = array();
    foreach ($List as $ListRow) {
        $rows[] = array(
            'id' => $ListRow['AmountID'],
            'ip' => $ListRow['ip'],
            'material' => $ListRow['material']==null?"无":$ListRow['material'],
            'time' => $ListRow['PlayData'],
        );
    }
    //返回数据
    echo json_encode(array('total' => $total, 'rows' => $rows));
}
getList();
?>

PoppinRubo / jquery.dataTable

jquery.dataTable

查看demo

简介

发行版

贡献者

近期动态

PoppinRubo / jquery.dataTable .gitee-modal { width: 500px !important; }

jquery.dataTable

查看demo

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

PoppinRubo / jquery.dataTable