7840


現在のCSSは下記の通りで、ページ選択のデザインはボタンではなく文字です。  
その文字をクリックすることで、ページが遷移します。  
そして、この文字をボタンにしたいのですが、方法が分かりません。  
ご教授をお願いします。

[code]

    .dataTables_paginate {
        float: right;
        text-align: right;
        padding-right:6px;
        font-family: "Verdana";
    }
    
    .paging_full_numbers {
        height: 22px;
        line-height: 22px;
    
    }
    
    .paging_full_numbers a:active {
        outline: none
    }
    
    .paging_full_numbers a:hover {
        text-decoration: none;
    }
    
    .paging_full_numbers a.paginate_button,
    .paging_full_numbers a.paginate_active {
        border: 1px solid #aaa;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 2px 5px;
        margin: 0 3px;
        cursor: pointer;
        color: #333 !important;
    }
    
    .paging_full_numbers a.paginate_button {
        background-color: #ddd;
    }
    
    .paging_full_numbers a.paginate_button:hover {
        background-color: #ccc;
        text-decoration: none !important;
    }
    
    .paging_full_numbers a.paginate_active {
        background-color: #99B3FF;
    }
    
[/code]


CC BY-SA 3.0
2015-03-12T08:40:38.103
7831
2015-03-13T14:43:56.087
7626
question
html css jquery
DataTablesのページ選択のデザインを、ボタンにする方法が知りたいです。


すみません質問を読み違えていました。  
DataTablesでのボタンリンクをボタンに、ということですね。

オプションを見てみましたが、ボタン要素を置き換えるためのオプションは見つかりませんでした。  
よって、自分で置き換える必要がありますが、DataTablesがどの要素にどういう属性を置いているかを調べないと実現できません。

一応できましたが、一見しただけでは何をやっているのか分からないかもしれません。

できたコードを先に書いておきます。  
原理は後述しますが、分からなくても動かせます。

データは作っていませんのでデータ指定のところは作ってください。  
`"drawCallback"`で以下の定義した関数を呼び出すようにすれば良いです。

[code]

    // ボタンクリックイベント処理
    $(document).on('click', '.myButton', function(e){
        var idx = $(this).attr('idx');
        $('.dataTables_paginate').find('a[data-dt-idx='+idx+']').trigger('click');
    });
    
    // ボタンの置きかえ処理
    function replaceButton()
    {
        $('.paginate_button').each(function(){
            var orgButton = $(this);
            var newButton = $('<button>');
    
            newButton.addClass('myButton');
            newButton.attr('idx', orgButton.attr('data-dt-idx'));
            newButton.html(orgButton.html());
            if(orgButton.hasClass('disabled')){
                newButton.attr('disabled', true);
            }
            if(orgButton.hasClass('current')){
                newButton.attr('disabled', true);
            }
    
            orgButton.hide().after(newButton);
        });
    }
    
    $(document).ready(function() {
        // DataTablesによる表示
        $('#example').DataTable( {
            "pagingType": "full_numbers",
            "data": data
            ],
            "drawCallback": function(){
                replaceButton();
            }
        } );
    });
    
[/code]

基本的な方針としては、既存の`<a>`要素でのボタンは非表示にし、その要素の後ろに`<button>`要素を追加しています。

その置きかえ処理をどのタイミングで行うかというとテーブルの表示後です。  
`drawCallback`というオプションがありますのでそれを指定します。  
このオプションはページ遷移後にも都度呼び出されます。

置きかえ処理では、各ボタンに共通で指定されている`.paginate_button`を指定し、必要な情報をコピーします。  
ボタンの無効化処理もここでやります。現在表示しているページ番号には`.current`が追加されているため、これが指定されているボタンに対しても無効化を行っています。

新しく配置したボタンをクリックすると、元々の要素のクリックイベントを発火させます。  
元々の要素をどうやって特定しているかというと、`data-dt-idx`という属性の値が各ボタンにシーケンシャルに割り当てられていますのでそれを使います。

もっと詳しく知りたい場合はページを表示させながらDOMを追ってみてください。


CC BY-SA 3.0
2015-03-12T10:40:33.350
7840
2015-03-13T14:43:56.087
2015-03-13T14:43:56.087
7214
7214
7831
answer