在 Laravel ajax 中的表中搜索后如何从 1 重新开始列号？

Question

在 Laravel 中使用数据表中的 ajax 执行搜索后，我想从 1 重置或重新启动列号。

到目前为止我写的代码

<table class="table table-bordered table-striped table-condensed flip-content" id="server-side-datatables">
    <thead>
        <tr>
           <th class="dt-body-left">Serial No.</th>                                   
           <th>Document Type</th>                           
           <th>Document Nr.</th>                           
           <th>Date</th>                           
           <th>Amount</th>                           
           <th>CURENCY</th>                           
           <th>Merchnat</th>                           
           <th>Commnets</th>                           
           <th width="10%">Action</th>
        </tr>
    </thead>                                         
    <tbody>

  
    </tbody>
</table>                                              


    <script type="text/javascript">
    

    $(document).ready(function(){


        $("#search-frm").submit(function(){
            oTableCustom.draw();
            return false;
        });
//         $("#search-frm").submit(function(e) {
//     table.fnPageChange(0);
//     table.fnReloadAjax();
//     return false;
// });


        $.fn.dataTableExt.sErrMode = 'throw';
        var cur_month = '{{date("M")}}';
        var title = 'WEBPAL WEB SERVICES                                                                            BORDEROU CONTABILITATE LUNA:'+ cur_month;
        var filename = 'WEBPAL WEB SERVICES BORDEROU CONTABILITATE LUNA:'+ cur_month;
        var oTableCustom = $('#server-side-datatables').DataTable({
            processing: true,
            dom: 'Bfrtip',
            serverSide: true,
            searching: false,
            ajax: {
                "url": "{!! route($moduleRouteText.'.data') !!}",
                "data": function ( data ) 
                {
                    data.search_start_date = $("#search-frm input[name='search_start_date']").val();
                    data.search_end_date = $("#search-frm input[name='search_end_date']").val();
                    data.doc_number = $("#search-frm input[name='doc_number']").val();
                    data.search_parteners = $("#search-frm input[name='search_parteners']").val();
                }
            },            
            "order": [[ 0, "asc" ]],
            // "fnRowCallback" : function(nRow, aData, iDisplayIndex){
            //     $("td:first", nRow).html(iDisplayIndex +1);
            //     return nRow;
            // },


            columns: [
                { data: 'rownum', name: 'rownum' },
                { data: 'doc_type', name: 'doc_type' },                                              
                { data: 'doc_number', name: 'doc_number' },
                { data: 'doc_date', name: 'doc_date'},                                              
                { data: 'amount', name: 'amount' },                                              
                { data: 'currency', name: 'currency' },                                              
                { data: 'partener', name: '{{ TBL_PARTENER }}.id'},                                  
                { data: 'comments', name: 'comments' },            
                { data: 'action', orderable: false, searchable: false}        
            ],
            lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10 rows', '25 rows', '50 rows', 'Show all' ]
            ],
            columnDefs: [
                { "type": "num-fmt", "targets": 4, "className": "text-left", appliesTo: 'pdf' }
              ],
            buttons: [
                {
                    extend: 'pageLength'
                }, 
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    title: title,
                    filename:filename,
                    exportOptions: {
                        columns: [ 0, 1, 2,3,4,5,6,7 ],
                    },
                    customize : function(doc){ 
                        doc.content[1].table.widths = 
                                    Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                        doc.styles.tableHeader.alignment = 'left';
                    },

                },
            ]

        });        
    });
    </script>
@endsection

我想要这样的输出

Answer 1

只使用 CSS 代码

tbody {
  counter-reset: row;
  /* Set the row counter to 0 */
}

tbody tr::before {
  counter-increment: row;
  /* Increment the row counter*/
  content: counter(row) ": ";
  /* Display the row */
}