4

多くの行を持つテーブルがあります。したがって、list.js（ページネーション）を使用することにしました。ただし、数字をページとして使用するのではなく、個別にスタイルを設定できる (またはジョブにブートストラップする) ボタンが必要nextですprevious。

<ul class="pager">
     <li>
          <a class="" href="#">Previous</a>
     </li>
     <li>
          <a class="" href="#">Next</a>
     </li>
</ul>

var list = new List('item-table', {
    valueNames: ['item'],
    page: 10,
    plugins: [ListPagination({})]
});

これはライブラリで可能ですか (ドキュメントで役立つものは何も見つかりませんでした)、それとも何か他のものを使用する必要がありますか?

ロールからの解決策を試しました。というエラーが表示されますCannot read property 'childNodes' of undefined。を追加すると、このエラーは消えます<ul class="pagination"></ul>。ただし、リストの show メソッドにアクセスしようとすると、再びエラーが発生します。Cannot read property 'show' of undefined

新しい JS コード

$(document).ready(function() {
        //var options = {
        //    valueNames: ['einheit'],
        //    page: 13,
        //    plugins: [ListPagination({})]
        //}

        var list = new List('item-table', {
            valueNames: ['item'],
            page: 10,
            plugins: [ListPagination({})]
        });

        var i = 1;

        $('.next').on('click', function () {
            console.log("next");
            i++;
            list.show(i, 10);
        });

        $('.prev').on('click', function () {
            console.log("prev");
            i--;
            list.show(i, 10);
        });
    });

HTML コード

<div id="item-table">
                <table class="table">
                    <thead>
                    <tr>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody class="list">
                        <tr class="item">
                        </tr>
                    <!-- loads of items here -->
                    </tbody>
                </table>
                <ul class="pager">
                    <li class="next">
                        <a href="#">Next</a>
                    </li>
                    <li class="prev">
                        <a href="#">Previous</a>
                    </li>
                </ul>
            </div>
4

5 に答える 5

5

シュアー。ドキュメントを読むだけで、ボタンを作成する必要があり、jquery を使用してトリックを実行できます

http://www.listjs.com/docs/list-api

    var i = 1;
            $('.next').on('click', function(){
                i++;
                listObj.show(i, 3); 
            })

            $('.prev').on('click', function(){
                i--;
                listObj.show(i, 3); 
            })

それが機能するかどうか教えてください。

于 2015-12-29T00:13:01.140 に答える
0

Javascriptは私の強みではなく、おそらく少し遅れていますが、適用できない場合に次/前のボタンが表示されないようにするためにまとめたものを次に示します. うまくいけば、誰かがそれを役に立つと思うでしょう。

jQuery(document).ready(function() {
    var page_quantity = 10,
    options = {
        valueNames: ['title', 'disease', 'source'],
        page: page_quantity
    },
    articleList = new List('tbp-resources', options),
    list_count = articleList.items.length,
    list_i = 0;

    // Next/Previous page buttons
    jQuery('.js-list-next').on('click', function(event){
        event.preventDefault();

        list_i++;
        var new_floor = (list_i * page_quantity + 1);

        if((new_floor + page_quantity) >= list_count){
            jQuery(this).toggleClass('hide');
        }
        jQuery('.js-list-prev.hide').toggleClass('hide');
        articleList.show((list_i * page_quantity + 1), 10);
    });

    jQuery('.js-list-prev').on('click', function(event){
        event.preventDefault();

        list_i--;
        if(list_i < 1) {
            jQuery(this).toggleClass('hide');
        }
        jQuery('.js-list-next.hide').toggleClass('hide');
        articleList.show((list_i * page_quantity + 1), 10);
    });
});
于 2016-03-25T00:58:55.047 に答える
0 

// Setup click event listeners for your buttons, (let me use jQuery)
$('li').on('click', function(){
    // handle click of previous button
    if(li.hasClass('previous')) {
      list.show(list.i - 10, list.page);
    }
    // handle click of next button
    if(li.hasClass('next')) {
      list.show(list.i + 10, list.page);
    }
});
YOUR BUTTONS MARKUP

<ul class="pager">
  <li>
    <a class="previous" href="#">Previous</a>
  </li>
  <li>
    <a class="next" href="#">Next</a>
  </li>
</ul>

于 2016-11-28T03:47:55.713 に答える