Wie fügen Sie Zeilen-Nummer in Tabelle genareted von JQuery DataTable mit server-side-datasource

Verwende ich JQuery DataTable zu binden und zu zeigen, dass meine Daten. Allerdings kann ich nicht hinzufügen, Zeilennummer generiert raster von client-Seite. Hier mein code:

HTML

<table id="applications_list" class="table table-bordered datagrid">
    <thead>
        <tr>
            <th><?php echo __('No.'); ?></th>
            <th><?php echo __('Application Code'); ?></th>
            <th><?php echo __('Application Name'); ?></th>
            <th><?php echo __('Created By'); ?></th>
            <th><?php echo __('Created Date'); ?></th>
            <th><?php echo __('Action'); ?></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Javascript

$('#applications_list').dataTable({
    "bLengthChange": false,
    "bFilter": true,
    "bFilter": false,
    "bProcessing": true,
    "bServerSide": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": config.siteURL  + "/applications/ajax_index",
    "sServerMethod": "POST",
    "aoColumns": [
        { "mData": null, "bSortable": false },
        { "mData": "app_applicationcode",  "sName": "app_applicationcode" },
        { "mData": "app_applicationname", "sName": "app_applicationname" },
        { "mData": "app_createdby", "sName": "app_createdby" },
        { "mData": "app_createddate", "sName": "app_createddate" },
        { "mData": "app_applicationcode", "bSortable": false, "mRender": function(data) {
            return '<a href="' + config.siteURL + '/applications/delete/' + data + '" class="confirm_delete"><i class="">x</i></a>' 
        }},
   ],
    "aaSorting": [[ 0, 'asc' ]],
});

Ich Lesen Sie die Dokumentation,hier, aber es wird nicht funktionieren. Kann mir jemand helfen dieses problem zu lösen?

warum können Sie es hinzufügen, um die Daten der server-Seite? Haben Sie die Zeile start...sonst würde nicht in der Lage sein, limit in db nachschlagen
Ja, dass die Lösungen, aber ich möchte nur hinzufügen, dass es auf der client-Seite.
wahrscheinlich finden, was Sie brauchen in .fnSettings()
Ich sehe nicht .fnSettings() wird das problem lösen. Kannst du mir ein Beispiel?
schauen Sie durch es, es ist ein riesiges Objekt, sollten Ihre paging-posiiton. Dann verwenden Sie code, den Sie verlinkt wird. weit einfacher, dies zu tun auf dem server

InformationsquelleAutor Habibillah | 2013-11-22

4

Für DataTables 1.10.4,
```
"fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        }
```
Teilweise funktioniert, es fügt einfach die zahlen, aber nicht mit Paginierung, wenn es von einer server-Seite.
Nicht Wert, mit Paginierung , beginnt wieder mit 0

InformationsquelleAutor Abhishek Singh
2

Da keine der Lösungen hier für mich gearbeitet, hier ist meine Lösung für eine server-Seite.
1. fügen Sie die extra <th></th> in der Tabelle, diese ist zu markieren, wo die Zahl eingefügt werden soll.
2. fügen Sie den folgenden direkt nach der Einleitung der Tabelle, auf die gleiche Weise fügen Sie "ajax": {"url":"somepage"},
  
  "fnCreatedRow": Funktion (Zeile, Daten, index) {
  var info = table.page.info();
  var Wert = index+1+info.start;
  $('td', Zeile).eq(0).html(Wert);
  },
3.An der Stelle, wo die Variablen definiert für die Spalten der Tabelle, diese Spalte hinzuzufügen, { "data": null,"sortierbar": false },
also es sieht wie folgt aus:
```
"columns": [
{ "data": null,"sortable": false  },
......]
```
4. Um loszuwerden, das Sortieren-Symbol (Pfeil nach unten), wählen Sie die zweite Spalte durch hinzufügen, "order": [[ 1, 'asc' ]] auf die gleiche Weise, Sie würden hinzufügen, "ajax"....

Ich versuche zu Folgen, Ihren code, aber ich habe diesen "ReferenceError: Tabelle ist nicht definiert" - Fehler.. EDIT : habe den Fehler beheben, fügen Sie einfach die var table = $('#datatable').DataTable({....
Bitte machen Sie die änderungen in die Antwort, und ich werde es genehmigen, so dass andere Menschen nicht das gleiche Problem.

InformationsquelleAutor Damir Olejar

Möglich wird dies durch machen Verwendung von fnPagingInfo api in der rowCallback an die Seite bekommen und die Anzeige der Länge und verwenden Sie es zu berechnen, die Nummer der Zeile wie diese:

Für Datentabellen < 1.10

$('#example').dataTable({
  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
     var page = this.fnPagingInfo().iPage;
     var length = this.fnPagingInfo().iLength;
     var index = = (page * length + (iDisplayIndex +1));
     $('td:eq(0)', nRow).html(index);
  }
});

Für DataTables == 1.10

$('#example').dataTable({
  "rowCallback": function( row, data, iDisplayIndex ) {
     var info = this.api.page.info();
     var page = info.page;
     var length = info.length;
     var index = = (page * length + (iDisplayIndex +1));
     $('td:eq(0)', row).html(index);
  }
});

HINWEIS: für Datentabellen < 1.10, müssen Sie die fnPageInfo.js Skript zu Ihrer Seite

SyntaxError: erwartet Ausdruck,'='

InformationsquelleAutor Jaleel Adesina

1

Offizielle Lösung von DataTable:
```
table.on( 'order.dt search.dt', function () {
    table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();
```
Aber für die server-Seite der Verarbeitung, seinen feinen arbeiten beim erstmaligen laden und Sortieren, aber wenn wir nach jedem Punkt, es stellen [object object] anstelle von s.Nein.

InformationsquelleAutor Bian Jiaping
1

Den guide von offizielle Dokumentation hat nicht funktioniert auf der server-Seite Tabellen. Die beste Antwort, die ich bekommen kann ist aus diese Antwort (aus einer anderen Frage), nur um zu schreiben ein render-Funktion:
```
{
    "data": "id",
    render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
    }
}
```
Gehen upvote diese Antwort.

InformationsquelleAutor Ifan Iqbal

Fügen Sie folgenden code in "fnRowCallback":

Für Datatables 1.10

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
     var info = $(this).DataTable().page.info();
     $("td:nth-child(1)", nRow).html(info.start + iDisplayIndex + 1);
     return nRow;
 }

InformationsquelleAutor Vishal P.

Beste Lösung:

"columns": [

    { "data": null,"sortable": false, 
       render: function (data, type, row, meta) {
                 return meta.row + meta.settings._iDisplayStart + 1;
                }  
    },
......
]

Warum ist es das beste ? Fügen Sie bitte mehr Kontext für deine Antwort
Es macht einen job und kleineren code implementiert ist

InformationsquelleAutor kubura

0

Vorausgesetzt, die <?php echo __('No.'); ?> ist der Primärschlüssel aus der Datenbank, die Sie verwenden können columnDefs fügen Sie den Schlüssel als Zeilennummer zu jeder Zelle einer Zeile wie dieser
```
"columnDefs": [{
    "targets": '_all',
    "createdCell": function(cell, cellData, rowData, rowIndex, colIndex) {
        $(cell).attr({'data-pk': rowData[0]});
    }
}]
```
Wo rowData[0] werden die primären Schlüssel-Wert.

InformationsquelleAutor pavankguduru

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.