スクリプトを修正してデータベーステーブルに行コールバック関数を追加する方法

Dec 04 2020

データベーステーブルに行コールバック関数を追加するようにスクリプトを修正する際に助けていただければ幸いです。

データテーブルを使用して、行番号を表示したいと思います。同様の質問に答えて@Pehmoleluによって提供されたコードを見つけましたが、これはデータベースブルとjavascriptを使用した最初の試みです。それらをまとめるのに十分な構文についてはわかりません。私が現在使用しているスクリプト:

<script> type="text/javascript">
                
          $(document).ready(function(){ $('table').DataTable({          
                   searching:true, 
                   ordering:false,
                   paging:true,
    "bLengthChange": false,
                   lengthMenu:[31], 
 
                })
            });
</script>

これは、@ Pehmoleluによって提供された行番号を表示すると私が思うものです。

var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;

そして私はそれが追加することを含むことを知っています:

"fnRowCallback": function( nRow, aData, iDisplayIndex )

私もこのコードを試しましたが、このコードはすべての行の行番号を示しているため、100行ある場合は1〜100と表示されます。私が欲しいのは、それがページネーションで機能することです。したがって、ページごとに20行に設定すると、各ページに1〜20行が表示されます。

$(document).ready(function() {
    var t = $('table').DataTable( {
        "columnDefs": [ {
        
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
 
    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
} );

私はそれが非常に基本的であることを知っていますが、私は本当に助けをいただければ幸いです。ありがとう

回答

Noname Dec 05 2020 at 19:53

それが他の誰かを助け、@ Pirateからの情報をここで研究することがうまくいくと私が見つけたものである場合に備えて、

<script> type="text/javascript">
                
$(document).ready(function(){ $('#table').DataTable({
                    
                   searching:true, 
                   ordering:false,
                   paging:true,
                   "bLengthChange": false,
                   lengthMenu:[31], 
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
 var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
}   

                });
                
            });

</script>