내 스크립트를 수정하여 데이터베이스 테이블에 행 콜백 기능을 추가하는 방법

Dec 04 2020

데이터베이스 테이블에 행 콜백 기능을 추가하기 위해 스크립트를 수정하는 데 도움을 주시면 감사하겠습니다.

데이터 테이블을 사용하여 행 번호를 표시하고 싶습니다. 비슷한 질문에 대한 대답으로 @Pehmolelu가 제공 한 코드를 찾았지만 이것은 databasebles 및 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>