Jquery Bootstrap分页和搜索

时间:2017-06-21 19:50:15

标签: php jquery ajax bootstrap-4

我在html页面创建了简单的表,我想要使用Jquery Bootstrap Pagination和Show数据的大量数据,如何添加bootstrap分页并在此表中搜索,我的html表代码在下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td><b>Name</b></td>
    <td><b>Title</b></td>
  </tr>
  <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
</table>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

尝试兼容Bootstrap的jQuery插件dataTables并提供分页和过滤。