Bootstrapなどでtable要素をいい感じに作れますが、ページングやソート機能、検索機能などをつけようとすると自分で色々といじっていく必要がありますが、DataTablesを使うとそのような機能を簡単に作ることが出来ます。
使用方法は以下のようにhead内にcssとjsのリンクを追加します。
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
<script>
jQuery(function($){
$("#data-table").DataTable({
pageLength: 50
});
});
</script>
<title></title>
</head>
DataTablesでは様々なオプションを指定することが出来ます。上ではpageLengthオプションを使用して1ページに表示する件数をデフォルトで50件に指定しています。
詳しいオプションなどは以下が参考になります。
