Dữ liệu HTML là gì?

Question

Nếu bạn đang xây dựng một ứng dụng xử lý dữ liệu mở rộng, bạn có thể muốn triển khai các bảng thời gian thực vào một lúc nào đó. Hãy lấy một hệ thống quản lý nội dung làm ví dụ. Một lượng lớn dữ liệu được thêm và xóa thường xuyên và chúng tôi muốn các thay đổi có sẵn cho người tiêu dùng ngay lập tức

Nội dung chính Show

Thiết lập DataTables
Tạo bản thiết kế bảng của chúng tôi
Thêm bản ghi mới vào bảng
Chọn và xóa các bản ghi hiện có khỏi bảng
Cập nhật thời gian thực với Pizer
Cài đặt Pusher trên Client
Cài đặt Kênh Pusher trên Máy chủ
Phần kết luận
Làm cách nào để tạo DataTable HTML?
DataTable là gì?
Sự khác biệt giữa bảng và DataTable là gì?
Làm cách nào để tạo DataTable trong HTML và CSS?

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn triển khai các tính năng tương tự trên bảng thời gian thực của chúng tôi. Chúng tôi sẽ sử dụng một vài công cụ dành cho nhà phát triển, đó là

jQuery. Một thư viện JavaScript nhỏ giàu tính năng cho phép thao tác DOM, xử lý sự kiện, hoạt ảnh và triển khai AJAX dễ dàng hơn
Kênh đẩy. Một dịch vụ pub/sub thời gian thực miễn phí, dễ sử dụng. Kênh làm cho thời gian thực dễ dàng như sử dụng các sự kiện cơ bản
Bảng dữ liệu. Một plug-in jQuery sử dụng các khái niệm nâng cao lũy tiến để thêm các điều khiển tương tác nâng cao vào bất kỳ bảng HTML nào
Bootstrap. Một khuôn khổ giao diện người dùng để phát triển các dự án đầu tiên trên thiết bị di động, đáp ứng trên web

Đây là một cái nhìn thoáng qua về những gì chúng ta sẽ xây dựng

Thiết lập DataTables

Chạy DataTables trên ứng dụng của chúng tôi khá đơn giản và dễ hiểu. Tất cả những gì chúng ta cần làm là bao gồm tệp JavaScript DataTables và tệp CSS DataTables trong trang HTML của chúng tôi. Có rất nhiều plugin khác mà chúng tôi có thể thêm vào để nâng cao khả năng chỉnh sửa và mở rộng bộ tính năng của DataTables nhưng về cơ bản, chúng tôi sẽ sử dụng hai tệp này. Cần lưu ý rằng là một plug-in jQuery, DataTables sẽ dựa vào jQuery để hoạt động. Để bao gồm DataTables trên trang của chúng tôi, chúng tôi chỉ cần bao gồm các liên kết sau trên trang HTML của chúng tôi

    <head>
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
    head>

Các liên kết này sẽ nằm ở cuối phần tử

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

7 của chúng ta, ngay trước thẻ đóng của nó

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

Tạo bản thiết kế bảng của chúng tôi

Để tạo bản thiết kế bảng của chúng tôi, chúng tôi chèn một phần tử

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

8 vào trang của chúng tôi và với jQuery, nối thêm phương thức

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

9 vào nó. Điều này sẽ khởi tạo tất cả các tính năng tích hợp sẵn của DataTables. Phương thức

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

9 lấy một đối tượng làm đối số. Đối tượng có một thuộc tính

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

1 lấy

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

2 , một mảng dữ liệu mà chúng tôi dự định hiển thị trên bảng. Chúng tôi cũng bao gồm một thuộc tính khác có tên là

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

3 và đặt giá trị của nó thành một mảng các đối tượng với giá trị của mỗi đối tượng đóng vai trò là tiêu đề cột cho bảng của chúng tôi

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

Tập dữ liệu được lưu trữ trong một tệp JavaScript khác và phải được nhập trước tệp JS tùy chỉnh ở trên

    <script src="data.js"></script>
    <script src="script.js"></script>

Thêm bản ghi mới vào bảng

Để thêm các bản ghi mới vào bảng của chúng tôi, trước tiên chúng tôi tạo một biểu mẫu có các tùy chọn hợp lệ trong trang HTML của chúng tôi. Sau đó, chúng tôi tiến hành tạo một phương thức có tên là

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

4 trong tệp JavaScript của chúng tôi. Sử dụng jQuery, chúng tôi làm cho

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

4 trả về giá trị của mọi tùy chọn trong biểu mẫu của chúng tôi bên dưới

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

Sau đó chúng ta tiến hành tạo phương thức

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

4


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

Chúng tôi tạo một phương thức có tên là

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

7 để nối thêm bất kỳ dữ liệu nào mà

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

4 trả về


    addRow(dataTable) {
        const formData = this.buildForm();
        const addedRow = dataTable.row.add(formData).draw();
        addedRow.show().draw(false);
        const addedRowNode = addedRow.node();
        console.log(addedRowNode);
        $(addedRowNode).addClass('highlight');
      }

Các phương thức

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

9 và

    <script src="data.js"></script>
    <script src="script.js"></script>

0 là các phương thức API DataTables sẵn có, các phương thức DataTables khác được triển khai trong

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

7 là

    <script src="data.js"></script>
    <script src="script.js"></script>

2,

    <script src="data.js"></script>
    <script src="script.js"></script>

3 và

    <script src="data.js"></script>
    <script src="script.js"></script>

4

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

9 thêm một hàng mới vào bảng bằng cách sử dụng dữ liệu đã cho

    <script src="data.js"></script>
    <script src="script.js"></script>

0 vẽ lại và cập nhật bảng trong bối cảnh hiện tại

```
    <script src="data.js"></script>
    <script src="script.js"></script>
```
2 hiển thị một trường trong bảng của chúng tôi. Điều này hữu ích cho các trường hợp khi bạn muốn có sẵn các trường biểu mẫu bổ sung, nhưng chỉ hiển thị chúng trong một số điều kiện nhất định
```
    <script src="data.js"></script>
    <script src="script.js"></script>
```
3 thêm một hàng mới mà không đặt lại hoặc làm biến dạng trang hiện tại
```
    <script src="data.js"></script>
    <script src="script.js"></script>
```
4 đóng vai trò là trình lắng nghe sự kiện, nó trả về phần tử DOM cho trường được yêu cầu, do đó cho phép thao tác DOM đối với trường

Sau đó, chúng tôi sử dụng phương thức

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

7 mà chúng tôi đã xây dựng và liên kết nó với một nút bằng cách sử dụng phương thức

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

1 của jQuery. Khi nhấp vào nút,

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

7 sẽ tự động thực hiện các chức năng của nó trên bảng của chúng tôi

     $('#add').on('click', this.addRow.bind(this, dataTable));

Chọn và xóa các bản ghi hiện có khỏi bảng

Bây giờ chúng ta hãy tạo một phương thức có tên là

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

3 , chức năng của nó là chọn một hàng trong bảng của chúng ta. Việc chọn một hàng sẽ đặt hàng vào vị trí để chúng tôi có thể xóa nó. Phương thức này chỉ cần thêm một lớp

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

4 vào hàng đã chọn và xóa bất kỳ hàng nào khác mà lớp

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

4 đã được thêm vào trước đó


    selectRow(dataTable) {
        if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
        } else {
          dataTable.$('tr.selected').removeClass('selected');
          $(this).addClass('selected');
        }
      }

Chúng ta cũng tạo một phương thức gọi là

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

6 , chức năng của nó là xóa một hàng khỏi bảng của chúng ta. Hàng bị loại bỏ là hàng có lớp

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

4

    removeRow(dataTable) {
        dataTable.row('.selected').remove().draw( false );
      }

Sau đó, chúng tôi tiến hành liên kết

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

3 và

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

6 với trình kích hoạt sự kiện tương ứng của chúng bằng cách sử dụng phương pháp

    <div class="col-md-4 col-md-offset-1">
      <h3 class="text-center">Create New Employeeh3>
      <div class="form-group">
        <label for="name">Namelabel>
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
      div>
      <div class="form-group">
        <label for="position">Positionlabel>
        <select name="position" id="position" class="form-control">
          <option value="">--Select Position--option>
          <option value="Frontend Developer">Frontend Developeroption>
          <option value="UI/UX Engineer">UI/UX Engineeroption>
          <option value="iOS Engineer">iOS Engineeroption>
          <option value="Android Developer">Android Developeroption>
        select>
      div>
      <div class="form-group">
        <label for="office">Officelabel>
        <select name="office" id="office" class="form-control">
          <option value="">--Select Office--option>
          <option value="Lagos">Lagosoption>
          <option value="London">Londonoption>
          <option value="New York">New Yorkoption>
          <option value="Berlin">Berlinoption>
        select>
      div>
      <div class="form-group">
        <label for="extn">Extnlabel>
        <input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
      div>
      <div class="form-group">
        <label for="startDate">Start Datelabel>
        <input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
      div>
      <div class="form-group">
        <label for="salary">Salarylabel>
        <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
      div>
      <div class="form-group">
        <button class="btn btn-info" id="add">Addbutton>
      div>
    div>

1 của jQuery như chúng tôi đã làm trước đây với

    const dataTable = $('#realtime').DataTable({
          data: dataSet,
          columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' }
          ]
        });

7

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

0

Cập nhật thời gian thực với Pizer

Để bật cập nhật theo thời gian thực trên bảng của chúng tôi, chúng tôi sẽ tích hợp Kênh Pizer. Kênh là một API được lưu trữ đơn giản để triển khai chức năng hai chiều theo thời gian thực một cách nhanh chóng, dễ dàng và an toàn trên web và ứng dụng dành cho thiết bị di động. Để đạt được điều này, Pusher phải được cài đặt ở cả phía máy khách và phía máy chủ. Phía máy khách có thẻ


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

2 trong khi chúng tôi cài đặt npm ở phía máy chủ. Một số khung và gói sẽ được tích hợp cùng với Pusher, đây là

Thể hiện. Khung nhanh, nhẹ, linh hoạt cho Node. js

bodyParser. Một mô-đun cung cấp phần mềm trung gian để trích xuất toàn bộ phần nội dung của luồng yêu cầu đến và hiển thị nó trên


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

3 dưới dạng thứ gì đó dễ giao tiếp hơn

áo lót. một nút. js cung cấp phần mềm trung gian có thể được sử dụng để cho phép chia sẻ tài nguyên nguồn gốc chéo với các tùy chọn khác nhau
trục. Ứng dụng khách HTTP dựa trên lời hứa dành cho JavaScript chủ yếu được sử dụng để gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST và thực hiện các thao tác CRUD

Cài đặt Pusher trên Client

Chúng tôi bắt đầu bằng cách đưa thư viện Máy khách Pizer và Axios vào trang HTML của chúng tôi

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

1

Trong tệp


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

4 của chúng tôi, chúng tôi tạo một phương thức có tên là


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

5 nơi chúng tôi thực hiện yêu cầu POST với Axios. Chúng tôi chuyển hai tham số trong yêu cầu POST của mình;

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

2

Sau đó, chúng tôi thiết lập kết nối của mình với Pusher bằng cách tạo một phiên bản Pusher mới
Trong trường hợp của chúng tôi, chúng tôi chèn khóa API miễn phí mà chúng tôi nhận được khi đăng ký với Pusher. Để đảm bảo lưu lượng kết nối được mã hóa, chúng tôi đặt


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

7 thành Boolean


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

8 trong ứng dụng của mình

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

3

Khóa là một phần của thông tin đăng nhập được tạo khi ứng dụng Kênh mới được tạo từ bảng điều khiển Pusher của bạn. Bạn có thể tạo một tài khoản bằng cách đăng ký. Xem Phụ lục cuối bài viết để biết cách thiết lập tài khoản Pizer

Cài đặt Kênh Pusher trên Máy chủ

Đầu tiên, chạy lệnh sau để cài đặt các phụ thuộc máy chủ

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

4

Tệp


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

9 được tạo; . Sau đó, chúng tôi tạo một phiên bản Pusher mới có một đối tượng chứa ID ứng dụng, khóa, bí mật, cụm và tùy chọn mã hóa của chúng tôi

Tiếp theo, chúng tôi tạo một tuyến đường POST và trong đó, chúng tôi sử dụng Pusher để kích hoạt sự kiện có tên


    addRow(dataTable) {
        const formData = this.buildForm();
        const addedRow = dataTable.row.add(formData).draw();
        addedRow.show().draw(false);
        const addedRowNode = addedRow.node();
        console.log(addedRowNode);
        $(addedRowNode).addClass('highlight');
      }

0 thông qua kênh


    addRow(dataTable) {
        const formData = this.buildForm();
        const addedRow = dataTable.row.add(formData).draw();
        addedRow.show().draw(false);
        const addedRowNode = addedRow.node();
        console.log(addedRowNode);
        $(addedRowNode).addClass('highlight');
      }

1

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

5

Để nhận các cập nhật theo thời gian thực trên bảng của chúng tôi, trong tệp


     buildForm() {
        return [
          $('#name').val(),
          $('#position').val(),
          $('#office').val(),
          $('#extn').val(),
          $('#startDate')
            .val()
            .replace(new RegExp('-', 'g'), '/'),
          `$${$('#salary').val()}`
        ];
      },

4 của chúng tôi (phía khách hàng), chúng tôi sử dụng phương pháp


    addRow(dataTable) {
        const formData = this.buildForm();
        const addedRow = dataTable.row.add(formData).draw();
        addedRow.show().draw(false);
        const addedRowNode = addedRow.node();
        console.log(addedRowNode);
        $(addedRowNode).addClass('highlight');
      }

3 của Pusher để đăng ký kênh của chúng tôi


    addRow(dataTable) {
        const formData = this.buildForm();
        const addedRow = dataTable.row.add(formData).draw();
        addedRow.show().draw(false);
        const addedRowNode = addedRow.node();
        console.log(addedRowNode);
        $(addedRowNode).addClass('highlight');
      }

4. Sau đó, chúng tôi xác định chức năng gọi lại liên kết sự kiện của chúng tôi


    addRow(dataTable) {
        const formData = this.buildForm();
        const addedRow = dataTable.row.add(formData).draw();
        addedRow.show().draw(false);
        const addedRowNode = addedRow.node();
        console.log(addedRowNode);
        $(addedRowNode).addClass('highlight');
      }

0 và với nó, dữ liệu của chúng tôi

    <body>
    <script src="https://code.jquery.com/jquery-1.12.4.js">script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js">script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js">script>
    body>

6

Phần kết luận

Với hướng dẫn này, bạn sẽ có thể dễ dàng xây dựng các ứng dụng thời gian thực đa nền tảng. Các tính năng DataTables và Pusher khác có sẵn nhưng việc sử dụng chúng tùy thuộc vào yêu cầu của ứng dụng của bạn. Bạn có thể xem qua tài liệu DataTables và trong khi xem tài liệu đó, hãy xem qua cả Pusher's. Để hiểu sâu hơn về dự án, vui lòng khám phá thêm trên GitHub

Làm cách nào để tạo DataTable HTML?

Cách tạo bảng HTML .

HTML tables begin with and end with

..

Bên trong phần tử bảng, bạn có thể tùy chọn bao gồm phần tử chú thích chứa tiêu đề ngắn gọn hoặc mô tả nội dung của bảng. .

Giống như tài liệu HTML, bảng bao gồm phần đầu và phần thân

DataTable là gì?

Trong ADO. NET, C# DataTable là đối tượng trung tâm. Nó đại diện cho các bảng cơ sở dữ liệu cung cấp một tập hợp các hàng và cột ở dạng lưới . Có nhiều cách khác nhau để tạo hàng và cột trong DataTable.

Sự khác biệt giữa bảng và DataTable là gì?

Bảng là phần trừu tượng của bảng HTML , i. e. , . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu. . DataTable đề cập đến một ma trận thông tin, giống như một bảng tính excel với các cột, hàng và dữ liệu. Bảng được sử dụng nghiêm ngặt để đánh dấu HTML trên trang và DataTable chỉ là phương tiện lưu trữ dữ liệu.

Làm cách nào để tạo DataTable trong HTML và CSS?

Phần quan trọng của quá trình cài đặt DataTable liên quan đến việc bao gồm các tệp Javascript và CSS của DataTable. Tệp CSS thực sự là tùy chọn, nhưng nó cung cấp kiểu dáng mặc định cho bảng của bạn. .

Sử dụng CDN của DataTable

tại địa phương

Sử dụng trình quản lý gói (NPM)

programming html

Dữ liệu HTML là gì?

Thiết lập DataTables

Tạo bản thiết kế bảng của chúng tôi

Thêm bản ghi mới vào bảng

Chọn và xóa các bản ghi hiện có khỏi bảng

Cập nhật thời gian thực với Pizer

Cài đặt Pusher trên Client

Cài đặt Kênh Pusher trên Máy chủ

Phần kết luận

Làm cách nào để tạo DataTable HTML?

DataTable là gì?

Sự khác biệt giữa bảng và DataTable là gì?

Làm cách nào để tạo DataTable trong HTML và CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội