react-datatable-jq v2.0.0
react-datatables
Datatable components built with React
Install
npm install react-datatable-jq --saveUsage
import React from 'react';
// import react-datatable-jq
import Datatable from 'react-datatable-jq'
// datatable global options. You can import it from your config.js
const options = {
dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'l>r>" + "t" + "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
autoWidth: false,
searching: false,
paging: true,
language: {
search: "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
lengthMenu: "每页显示 _MENU_ 条记录",
info: "<b>从_START_到_END_ / 共_TOTAL_条记录</b>",
infoEmpty: "显示0条记录",
emptyTable: "没有符合条件的记录",
zeroRecords: "没有符合条件的记录",
loadingRecords: "加载中...",
processing: "处理中...",
paginate: {
"first": "<b>首页</b>",
"previous": "<b>上一页</b>",
"next": "<b>下一页</b>",
"last": "<b>尾页</b>"
}
}
}
class BasicDatatable extends React.Component {
constructor(props) {
super(props);
// change the default options or add new option
options.ording = false;
this.options = options;
// the events list on datatable
this.events = [{
type: "click",
scope: "tbody tr td",
func: function() {
console.log("this is a test");
}
}];
// the columns for the datatable
this.columns = [{
data: 'id',
title: 'ID',
},
{
data: 'name',
title: 'Name',
orderable: false
},
{
data: 'sex',
title: 'Sex',
render: function(data, full) {
return data.toUpperCase() === 'M' ? "Boy": "Girl";
},
orderable: false
},
{
data: null,
title: 'Menu',
className: "menu",
orderable: false,
createdCell: function(td, cellData, rowData, row, col) {
$(td).on('click', '.action', function() {
console.log("you click the action dom");
});
}
}]
// dtData 负责 datatable data的部分
this.state = {
DTdata: null,
}
}
componentWillMount() {
let url = "/api/basic/ajax",
postData = {
"range": "all"
},
dtData = {
_method: "ajax",
url: url,
data: function(d) {
$.extend(d, postData);
return JSON.stringify(d);
},
type: "post",
contentType: "application/json; charset=utf-8",
dataSrc: "data"
};
this.setState({
dtData: dtData,
})
}
render() {
// theme: one of ["bootstrap", "bootstrap4", "foundation", "jqueryui", "material", "semanticui", "uikit"], default JqueryDatatable
return (
<div>
this is sample：
<Datatable
theme = {"bootstrap"}
options = {this.options}
dtData = {this.state.dtData}
columns = {this.columns}
events = {this.events}
className = "table table-striped table-hover"
id = "sample_table"
/>
</div >
);
}
}Props
theme
根据不同框架，可以选择不同主题的datatable样式，可选theme如下：
- bootstrap
- bootstrap4
- foundation
- jqueryui
- material
- semanticui
- uikit
theme为空时，将选择默认的jQuery Datatable的样式。
选择不同主题的datatable时，请记得把框架本身的js和css导入。例如选择bootstrap样式时，需要同时引用bootstrap.css，bootstrap.js文件来辅助样式
options
options中支持除ajax和data之外的datatable options中的取值，具体可选取值请参考以下地址 datatable options
因为考虑到datatable中数据的变化，所以把和数据相关的ajax和data属性合为dtData这个props，这样在react组件中使用和判断变化时会比较方便。
dtData
dtData代表了datatable中取值的方式，有以下4种：
ajax
通过ajax的方式传输，可以定义各种参数和处理方法，配合option可以实现后端分页。
dtData = {
// 标识 method 为ajax
_method: "ajax",
// 请求的url
url: url,
// 对request data的处理
data: function (d) {
$.extend(d, postData);
return JSON.stringify(d);
},
// 请求的方法
type: "post",
// contentType
contentType: "application/json; charset=utf-8",
// 对response data的处理
dataSrc: "data"
}更多的用法可以参考JQuery ajax.
data
直接给datatable传输数据。
dtData = {
// 标识 method 为 data
_method: "data",
// 标识当前数据在加载中，支队data:[]有效
_isLoading: true
// 数据
data: [
{
"id": 0,
"name": "john",
"sex": "M"
}
]
}url
简易的ajax方式，只需要传输一个url，默认get方法传输。
dtData = {
// 标识 method 为 url
_method: "url",
// 数据
url: "/api/data.json"
}func
更自由的处理方式，参考Datatable ajax
dtData = {
// 标识 method 为 url
_method: "function",
// 数据
func: function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
}其它
如果dtData为null，或不存在，将按照以下逻辑处理，形成一种loading的效果。
options.columns = props.columns;
options.data = [];
options.language = {};
options.language.emptyTable = props_options.language.loadingRecords || 'Loading...';
options.paging = false;
options.searching = false;
options.lengthChange = false;
options.info = false;所以，dtData初始为null，后续setState赋值，可以连贯成一种加载的效果。
columns
提供Datatable的列信息，使用参考Datatable columns
events
绑定在Datatable中的事件，使用方法如下：
[
{
// 事件类型
"type": "click",
// 事件触发的元素
"scope": "tbody tr td",
// 处理函数
"func": function(){}
}
]className
提供组件DOM的Class。
id
提供组件DOM的ID。
插件中识别组件的方法是 先判断是否有ID，再判断是否有className，两者都没有就使用"table:eq(0)"来获取。建议给每一个table加ID。
hasCheckOptionsChange
取值为布尔型，为true则在判断组件更新时，对options 这个props的值也进行判断，如果options的值变化，组件也会更新。
默认取值false
hasOptimizeDisplay
取值为布尔型，为true则在渲染组件时进行一些效果优化，比如dtData类型为data时，判断data的长度，小于10则不显示页码按钮等。
默认取值false