2017-06-21 14 views
0

私はJQuery Bootstrap PaginationとShowデータを使用したいhtmlページで簡単なテーブルを作成しました。どのようにしてこのテーブルでブートストラップのページングと検索を追加できますか?Jquery Bootstrap Paginationまた、検索

<!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> 
+0

ようこそStackOverflow!特定のプログラミング問題に悩まされた場合には、お手伝いをしてうれしく思いますが、ここではコードを書くつもりはありません。あなたは、少なくとも自分の問題を解決しようとする必要があります。 [**どのような質問がここにありますか?**](https://stackoverflow.com/help/how-to-ask) ://stackoverflow.com/help/on-topic)。 –

答えて

1

下にブートストラップ互換性があり、ページ付けおよびフィルタリングを提供するjQueryプラグインdataTablesを試してみてください。

+0

このコード検索ボタンを使用し、ページを実行するときにページ区切りが表示されない場合 – Doni

+1

今すぐ実行します。ありがとう – Doni