Javascript React Jquery数据表_Javascript_Html_Jquery_Reactjs

Javascript React Jquery数据表

javascript html jquery reactjs

Javascript React Jquery数据表,javascript,html,jquery,reactjs,Javascript,Html,Jquery,Reactjs,我正在尝试实现一个类似于laravel中的datatable的yajra datatable，所以我想我会尝试jquery datatable，它们都可以工作，但它表示没有可用的数据，无论何时搜索或排序，它都表示没有可用的数据，即使数据存在。不管怎么说，这里是代码，我还添加了图片，这样你就会明白。提前感谢：）图片： Client.js： <table className="table table-striped" id="table">

我正在尝试实现一个类似于laravel中的datatable的yajra datatable，所以我想我会尝试jquery datatable，它们都可以工作，但它表示没有可用的数据，无论何时搜索或排序，它都表示没有可用的数据，即使数据存在。不管怎么说，这里是代码，我还添加了图片，这样你就会明白。提前感谢：）

图片：

Client.js：

<table className="table table-striped" id="table">
            <thead className="thead-dark">
              <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Mobile</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Birthday</th>
                <th>Facebook Page</th>
                <th>Facebook Name</th>
                <th>Existing</th>
                <th>Remarks</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>{this.clientList()}</tbody>
          </table>


名称
地址
可移动的
电子邮件
性别
生日
Facebook页面
Facebook名称
现有的
评论
行动
{this.clientList（）}

my index.html：

<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>


</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>

<script>
  $(document).ready(function () {
      $('#table').DataTable();
    });
</script>


您需要启用JavaScript才能运行此应用程序。
$（文档）.ready（函数（）{
$（“#表”）.DataTable（）；
});

使用以下方法解决此问题：

import MUIDataTable from "mui-datatables";

const columns = [
  {
    name: "name",
    label: "Name",
    options: {
      filter: true,
      sort: true,
    },
  },
];

render() {
    const { clients } = this.state;
 <MUIDataTable data={clients} columns={columns} />
}

从“mui数据表”导入MUIDataTable；
常量列=[
{
姓名：“姓名”，
标签：“姓名”，
选项：{
过滤器：对，
排序：对，
},
},
];
render（）{
const{clients}=this.state；
}