{"id":25232934,"url":"https://github.com/zj-john/react-datatables","last_synced_at":"2026-03-18T00:03:51.939Z","repository":{"id":88671415,"uuid":"116802528","full_name":"zj-john/react-datatables","owner":"zj-john","description":"Datatable components built with React","archived":false,"fork":false,"pushed_at":"2018-12-14T07:56:43.000Z","size":1948,"stargazers_count":3,"open_issues_count":5,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-18T05:50:13.426Z","etag":null,"topics":["datatable","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zj-john.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-09T10:38:19.000Z","updated_at":"2019-07-26T04:09:26.000Z","dependencies_parsed_at":"2023-06-07T21:45:20.055Z","dependency_job_id":null,"html_url":"https://github.com/zj-john/react-datatables","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zj-john/react-datatables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zj-john%2Freact-datatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zj-john%2Freact-datatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zj-john%2Freact-datatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zj-john%2Freact-datatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zj-john","download_url":"https://codeload.github.com/zj-john/react-datatables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zj-john%2Freact-datatables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30636694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T23:56:54.546Z","status":"ssl_error","status_checked_at":"2026-03-17T23:56:28.952Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatable","react"],"created_at":"2025-02-11T13:37:15.389Z","updated_at":"2026-03-18T00:03:51.931Z","avatar_url":"https://github.com/zj-john.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-datatables-jq\nDatatable components built with React.   \nThe document is use for react-datatable-jq^2.0.0.\n\n\u003e 对使用低版本的用户来说，基本上做到了向下兼容，在代码中无需更改使用方式，详见文档下方的更新说明。\n\n## 安装\n```\nnpm install react-datatable-jq --save\n```\n\n## 用法\n```js\n\nimport Datatable from 'react-datatable-jq'\nimport 'react-datatable-jq/lib/media/js/dataTables.bootstrap.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.bootstrap.min.css'\n// datatable global options. You can import it from your config.js\nconst options = {\n    dom: \"\u003c'dt-toolbar'\u003c'col-xs-12 col-sm-6'f\u003e\u003c'col-sm-6 col-xs-12 hidden-xs text-right'l\u003er\u003e\" + \"t\" + \"\u003c'dt-toolbar-footer'\u003c'col-sm-6 col-xs-12 hidden-xs'i\u003e\u003c'col-xs-12 col-sm-6'p\u003e\u003e\",\n    autoWidth: false,\n    searching: false,\n    paging: true,\n    language: {\n        search: \"\u003cspan class='input-group-addon input-sm'\u003e\u003ci class='glyphicon glyphicon-search'\u003e\u003c/i\u003e\u003c/span\u003e \",\n        lengthMenu: \"每页显示 _MENU_ 条记录\",\n        info: \"\u003cb\u003e从_START_到_END_ / 共_TOTAL_条记录\u003c/b\u003e\",\n        infoEmpty: \"显示0条记录\",\n        emptyTable: \"没有符合条件的记录\",\n        zeroRecords: \"没有符合条件的记录\",\n        loadingRecords: \"加载中...\",\n        processing: \"处理中...\",\n        paginate: {\n            \"first\": \"\u003cb\u003e首页\u003c/b\u003e\",\n            \"previous\": \"\u003cb\u003e上一页\u003c/b\u003e\",\n            \"next\": \"\u003cb\u003e下一页\u003c/b\u003e\",\n            \"last\": \"\u003cb\u003e尾页\u003c/b\u003e\"\n        }\n    }\n}\n\nclass BasicDatatable extends React.Component {\n    constructor(props) {\n        super(props);\n        // change the default options or add new option\n        options.ording = false;\n        this.options = options;\n\n        // the events bind on datatable\n        this.events = [{\n            type: \"click\",\n            scope: \"tbody tr td\",\n            data: {id:1}\n            func: function(e) {\n                console.log(\"this is a test, you can console the id\", e.data.id);\n            }\n        }];\n        // the columns for the datatable\n        this.columns = [{\n            data: 'id',\n            title: 'ID',\n        },\n        {\n            data: 'name',\n            title: 'Name',\n            orderable: false\n        },\n        {\n            data: 'sex',\n            title: 'Sex',\n            render: function(data, full) {\n                return data.toUpperCase() === 'M' ? \"Boy\": \"Girl\";\n            },\n            orderable: false\n        },\n        {\n            data: null,\n            title: 'Menu',\n            className: \"menu\",\n            orderable: false,\n            createdCell: function(td, cellData, rowData, row, col) {\n                $(td).on('click', '.action', function() {\n                    console.log(\"you click the action dom\");\n                });\n            }\n        }]\n        // dtData 负责 datatable data的部分\n        this.state = {\n            DTdata: null,\n        }\n    }\n\n    componentDidMount() {\n        let url = \"/api/basic/ajax\",\n            postData = {\n                \"range\": \"all\"\n            },\n            dtData = {\n                _method: \"ajax\",\n                url: url,\n                data: function(d) {\n                    $.extend(d, postData);\n                    return JSON.stringify(d);\n                },\n                type: \"post\",\n                contentType: \"application/json; charset=utf-8\",\n                dataSrc: \"data\"\n            };\n        this.setState({\n            dtData: dtData,\n        })\n    }\n\n    render() {        \n        return (\n          \u003cdiv\u003e\n              this is sample：\n              \u003cDatatable\n                  options = {this.options}\n                  dtData = {this.state.dtData}\n                  columns = {this.columns}\n                  events = {this.events}\n                  className = \"table table-striped table-hover\"\n                  id = \"sample_table\"\n              /\u003e\n          \u003c/div \u003e\n      );\n    }\n}\n```\n\n# Props\n\n## options（必填）\noptions中支持除ajax和data之外的datatable options中的取值，具体可选取值请参考以下地址\n[datatable options](https://www.datatables.net/manual/options)\n\n\u003e 因为考虑到datatable中数据的变化，所以把和数据相关的ajax和data属性合为dtData这个props，这样在react组件中使用和判断变化时会比较方便。\n\n## dtData\ndtData代表了datatable中取值的方式，有以下4种：\n### ajax\n通过ajax的方式传输，可以定义各种参数和处理方法，配合option可以实现后端分页。\n```js\ndtData = {\n  // 标识 method 为ajax\n  _method: \"ajax\",\n  // 请求的url\n  url: url,\n  // 对request data的处理\n  data: function (d) {\n      $.extend(d, postData);\n      return JSON.stringify(d);\n  },\n  // 请求的方法\n  type: \"post\",\n  // contentType\n  contentType: \"application/json; charset=utf-8\",\n  // 对response data的处理\n  dataSrc: \"data\"\n}\n```\n更多的用法可以参考[JQuery ajax](http://api.jquery.com/jQuery.ajax/).\n\n### data（必填）\n直接给datatable传输数据。\n```js\ndtData = {\n  // 标识 method 为 data\n  _method: \"data\",\n  // 标识当前数据在加载中，支队data:[]有效\n  _isLoading: true\n  // 数据\n  data: [\n    {\n      \"id\": 0,\n      \"name\": \"john\",\n      \"sex\": \"M\"\n    }\n  ]\n}\n```\n\n\n### url\n简易的ajax方式，只需要传输一个url，默认get方法传输。\n```js\ndtData = {\n  // 标识 method 为 url\n  _method: \"url\",\n  // 数据\n  url: \"/api/data.json\"\n}\n```\n\n### func\n更自由的处理方式，参考[Datatable ajax](https://datatables.net/reference/option/ajax)\n```js\ndtData = {\n  // 标识 method 为 url\n  _method: \"function\",\n  // 数据\n  func: function (data, callback, settings) {\n    callback(\n      JSON.parse( localStorage.getItem('dataTablesData') )\n    );\n  }\n}\n```\n\n### 其它\n如果dtData为null，或不存在，将按照以下逻辑处理，形成一种loading的效果。\n```js\noptions.columns = props.columns;\noptions.data = [];\noptions.language = {};\noptions.language.emptyTable = props_options.language.loadingRecords || 'Loading...';\noptions.paging = false;\noptions.searching = false;\noptions.lengthChange = false;\noptions.info = false;\n```\n\n\u003e 建议dtData初始设置为null，后续用setState改变dtData，可以连贯成一种加载的效果。\n\n\n## columns（必填）\n提供Datatable的列信息，使用参考[Datatable columns](https://datatables.net/reference/option/columns)\n\n## events\n绑定在Datatable中的事件，使用方法如下：\n```js\n[\n  {\n    // 事件类型\n    \"type\": \"click\",  \n    // 事件触发的元素\n    \"scope\": \"tbody tr td\",\n    // 传输数据:类型不限，在func中通过event.data获取\n    \"data\": {id:1}\n    // 处理函数\n    \"func\": function(){}\n  }\n]\n```\n\n## className\n提供组件DOM的Class。\n\n## id\n提供组件DOM的ID。\n\n## hasOptimizeDisplay\n取值为布尔型，为true则在渲染组件时进行一些效果优化，比如dtData类型为data时，判断data的长度，小于10则不显示页码按钮等。  \n默认取值false\n\n# 更新说明\n在2.0.0版本中，除了重构优化了代码，用法上去除了theme这个props。 相关的主题样式可以通过以下方式引入：\n\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.bootstrap.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.bootstrap.min.css'\n```\n\n默认是不带任何datatable样式的。\n\n支持的主题样式如下：\n* datatable基本样式\n```js\nimport 'react-datatable-jq/lib/media/css/jquery.dataTables.min.css'\n```\n\n* bootstrap\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.bootstrap.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.bootstrap.min.css'\n```\n\n* bootstrap4\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.bootstrap4.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.bootstrap4.min.css'\n```\n\n* foundation\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.foundation.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.foundation.min.css'\n```\n\n* jqueryui\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.jqueryui.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.jqueryui.min.css'\n```\n\n* material\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.material.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.material.min.css'\n```\n\n* semanticui\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.semanticui.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.semanticui.min.css'\n```\n\n* uikit\n```js\nimport 'react-datatable-jq/lib/media/js/dataTables.uikit.min.js'\nimport 'react-datatable-jq/lib/media/css/dataTables.uikit.min.css'\n```\n\n\n\u003e 除了加载以上样式外，请记得把框架本身的js和css导入。例如选择bootstrap样式时，需要同时引用bootstrap.css，bootstrap.js文件来辅助样式（根据不同主题要求而定）\n\n# 常见问题\n1. NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.\n如果遇到这个报错，只需要在\u003cDatatable\u003e组件外层套一个\u003cdiv\u003e即可,如下\n```\nimport Datatable from 'react-datatable-jq'\n\n\u003cdiv\u003e\n\t\u003cDatatable {...props}\u003e\n\u003c/div\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzj-john%2Freact-datatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzj-john%2Freact-datatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzj-john%2Freact-datatables/lists"}