質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1854閲覧

[jQuery] フィルターをかけた結果に対してページネーション

futon

総合スコア10

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/07/04 03:46

編集2022/01/12 10:55

お世話になります。
ex-table-filter(https://github.com/cyokodog/jquery.ex-table-filter)と
pagination(http://shanabrian.com/web/jquery/pagination.php)を使用して、
文字列でフィルターをかけ、その結果に対してページネーションさせたいと思っています。

先日こちらで質問させていただきましたが、

jquery.pagination.jsのchangeEndCallback関数にフィルターを入れたら無事検索したものに対してページャーが出現しました。

【jquery.pagination.js内 changeEndCallback】

function() { $(".filter-area").keyup(function(){ $(".filter-area").val($(this).val()); //1ページに検索窓を2つ設置しているため、同じ文字列が入力されるようにしています。 $('table.data').exTableFilter('.filter-area'); }); },

ところが、現在
・フォームの文字を削除するとページャーが機能しなくなる(絞り込まれていない検索結果が表示されている状態)。
・ページャーの次へ&前へボタンを押すと検索で入力した言葉が無効(検索されていない状態のページネーション)になってしまう。
という問題が発生しています。

検索結果に対してページネーションさせる、という記述が出来ておらず、
根本的に考え方が間違っているのだと思うのですが、どのように直したらよいかわかりませんのでご教授ください。

【jQuery】

<script> $(document).ready(function () { $(".filter-area").keyup(function(){ $(".filter-area").val($(this).val()); $('table.data').exTableFilter('.filter-area'); }); $('.pager').pagination({ itemElement : '> .item', displayItemCount : 3, }); }); </script>

【html】

<input type="text" class="filter-area form-control"> <div id="main"> <div id="mainInner" class="pager"> <!-- 要素 --> <table class="data tableBox list_item item"> <tbody> <tr> <td></td> </tr> </tbody> </table> <!-- /要素 --> </div><!-- /mainInner pager --> </div><!-- /main -->

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問