преобразовать обычную таблицу html в таблицу данных

Question

Я тоже хочу преобразовать обычную таблицу в html в таблицу данных, чтобы я мог получить больше параметров, таких как

1. сортировка

2. нумерация страниц

3. поиск

Как я могу это сделать? это мой код для таблицы.

 <table id="payment">    
    <thead class="bg-danger">
        <th>S NO</th>
        <th>Date</th>
        <th>Voucher No</th>
    </thead>
    <tbody>
        <tr>
            <td> 1 </td>
            <td> 16/03/2020</td>
            <td> 12345</td>
        </tr>
        <tr>
            <td> 2 </td>
            <td> 17/03/2020</td>
            <td> 98765</td>
        </tr>
    </tbody>
</table>

Answer 1

Просто go до главной веб-страницы и изучите ее.

Ниже приведен простой пример возможного DataTable с вашим табличным кодом.

$(()=>{
    $('#payment').DataTable();
})

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css"/>

<table id="payment">    
    <thead class="bg-danger">
        <th style="width:200px;">S NO</th>
        <th style="width:200px;">Date</th>
        <th style="width:200px;">Voucher No</th>
    </thead>
    <tbody>
        <tr>
            <td> 1 </td>
            <td> 16/03/2020</td>
            <td> 12345</td>
        </tr>
        <tr>
            <td> 2 </td>
            <td> 17/03/2020</td>
            <td> 98765</td>
        </tr>
    </tbody>
</table>