Блог

Главная - Вопросы по программированию - Реагировать на Jquery Datatable

Реагировать на Jquery Datatable

#javascript #html #jquery #reactjs

#javascript #HTML #jquery #reactjs

Вопрос:

Я пытаюсь создать таблицу данных, подобную в laravel таблице данных yajra, поэтому я подумал, что попробую использовать 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>

мой 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>

Ответ №1:

Решил это, используя это для этого:

 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} />
}