jQueryを使用したブートストラップ検索可能なページネーションテーブルの例

まず、HTMLファイル内にテーブルと検索ボックスを作成します。

<div class="container">
  <input type="text" id="searchInput" placeholder="検索キーワードを入力してください">
  <table id="dataTable" class="table table-striped">
    <thead>
      <tr>
        <th>カラム1</th>
        <th>カラム2</th>
        <th>カラム3</th>
        <!-- 追加のカラムをここに追加 -->
      </tr>
    </thead>
    <tbody>
      <!-- テーブルの行とデータをここに追加 -->
    </tbody>
  </table>
  <ul id="pagination" class="pagination"></ul>
</div>

次に、JavaScriptコードを追加してテーブルの検索とページネーション機能を実装します。

$(document).ready(function() {
  // ダミーデータの配列（仮のデータとして使用）
  var data = [
    { column1: 'データ1', column2: 'データA', column3: 'その他のデータ1' },
    { column1: 'データ2', column2: 'データB', column3: 'その他のデータ2' },
    // 追加のデータをここに追加
  ];
  // ページネーションの設定
  var pageSize = 10; // 1ページに表示する行数
  var currentPage = 1; // 現在のページ
  // テーブルを初期化する関数
  function initTable() {
    // テーブルの内容をクリア
    $('#dataTable tbody').empty();
    // 現在のページに応じたデータを取得
    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = startIndex + pageSize;
    var pageData = data.slice(startIndex, endIndex);
    // テーブルにデータを追加
    $.each(pageData, function(index, item) {
      var row = $('<tr>');
      row.append($('<td>').text(item.column1));
      row.append($('<td>').text(item.column2));
      row.append($('<td>').text(item.column3));
      // 追加のカラムがある場合はここに追加
      $('#dataTable tbody').append(row);
    });
  }
// ページネーションを初期化する関数
  function initPagination() {
    // ページネーションのリンクをクリア
    $('#pagination').empty();
    // ページ数を計算
    var pageCount = Math.ceil(data.length / pageSize);
    // ページネーションのリンクを作成
    for (var i = 1; i <= pageCount; i++) {
      var link = $('<a>').text(i);
      if (i === currentPage) {
        link.addClass('active');
      }
      link.click(function() {
        currentPage = parseInt($(this).text());
        initTable();
        initPagination();
      });
      var listItem = $('<li>').append(link);
      $('#pagination').append(listItem);
    }
  }
// 検索ボックスの値が変更された時にテーブルを更新
  $('#searchInput').on('input', function() {
    var searchText = $(this).val().toLowerCase();
    // 検索結果のデータを格納する配列var searchData = [];
    // データを検索
    $.each(data, function(index, item) {
      // 検索条件に一致する場合は配列に追加
      if (item.column1.toLowerCase().includes(searchText) ||
          item.column2.toLowerCase().includes(searchText) ||
          item.column3.toLowerCase().includes(searchText)) {
        searchData.push(item);
      }
    });
    // 検索結果を表示するためにデータを更新
    currentPage = 1;
    data = searchData;
    // テーブルとページネーションを更新
    initTable();
    initPagination();
  });
  // 初期化を実行
  initTable();
  initPagination();
});

上記のコードは、ブートストラップのスタイルを持つ検索可能なページネーションテーブルを実装するための基本的な例です。データはダミーデータ（仮のデータ）として配列に格納され、検索ボックスの値に基づいてテーブルがフィルタリングされます。ページネーションは、指定されたページサイズに基づいてデータを分割し、ページ間のナビゲーションを提供します。