How to add row number on table genareted by JQuery DataTable with server side datasource

add serial number column in datatable jquery
jquery datatable add row html
add serial number column in datatable laravel
datatables add data attribute to row
how to append data in datatable using jquery
jquery datatable get row index onclick
jquery datatable change row index
datatables update row index

I use JQuery DataTable to bind and show my data. However, I can't add row number to generated grid from client side. Here my 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' ]],
});

I read documentation here, but it won't work. Can anyone help me to solve this problem?


Best solution:

"columns": [

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

Automatic addition of row ID attributes, Often when using server-side processing you will find that it can be useful to have a specific ID on to each row using the property DT_RowId of the data source object for each row (this property This example below shows DT_RowId being used to add information to the table. https://cdn.datatables.net/1.10.21/js/jquery. New rows can be added to a DataTable using the row.add()API method. Simply call the API function with the data for the new row (be it an array or object). can be added using the rows.add()method (note Data can likewise be updated with the row().data()and row().remove()methods.


For DataTables 1.10.4,

"fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        }

Index column, This example shows how this can be achieved with DataTables, where the first column is the This is done by listening for the order and search events emitted by the table. Javascript; HTML; CSS; Ajax; Server-side script; Comments https://code.jquery.com/jquery-3.5.1.js · https://cdn.datatables.net/1.10.21/js/​jquery. Automatic addition of row ID attributes. Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for example). By assigning the ID you want to apply to each row using the property DT_RowId of the data source object for each row (this property name can be configured using the rowId option), DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded


Add following code in "fnRowCallback":

For 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;
 }

Add rows, Add rows. New rows can be added to a DataTable using the row.add() API method. Simply call the Javascript; HTML; CSS; Ajax; Server-side script; Comments. See jQuery DataTables Checkboxes plug-in that makes it much easier to add checkboxes and multiple row selection to a table powered by jQuery DataTables. It works in client-side and server-side processing modes, supports alternative styling and other extensions.


Since none of the solutions here worked for me, here is my solution for a server-side.

  1. add the extra <th></th> in your table, this is to mark where the number is to be inserted.

  2. add the following right after initiating the table, the same way you would add "ajax": {"url":"somepage"},

    "fnCreatedRow": function (row, data, index) { var info = table.page.info(); var value = index+1+info.start; $('td', row).eq(0).html(value); },

3.At the location where the variables are defined for the table columns, add this column { "data": null,"sortable": false }, so it looks like this:

"columns": [
{ "data": null,"sortable": false  },
......]

4. To get rid of the sorting icon (up-down arrow), select the second column by adding , "order": [[ 1, 'asc' ]], the same way you would add "ajax"....

Row created callback, For each row that is generated for display, the createdRow function is called once and once only. It is passed the create row node which can then be modified. Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option. This example shows a very simple table, matching the other examples, but in this instance using server-side processing.


The guide from official documentation didn't work on server side tables. The best answer I can get is from this answer (from another question), just to write a render function:

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

Go upvote that answer.

Row details, The example below shows server-side processing being used with the first to the full data source object for the row, including information that is not actually shown The Javascript shown below is used to initialise the table shown in this example: addClass( 'details' ); row.child( format( row.data() ) ).show(); // Add to the  I thought this would be fairly easy, but I've searched and searched and came up with nothing that works. I just need to add row numbers to my table.


Generated content for a column, columns.render for content that is dynamic (i.e. based upon the row's data) defaultContent to create a button element in the last column of the table. A simple jQuery click event listener is used to watch for clicks on the row, and when that the column has no information contained in the data source object. Server-side​. If you are new to MVC, you can always get the tips/tricks/blogs about that here under MVC Tips. jQuery Datatable is a client side grid control which is lightweight and easy to use. But when it comes to a grid control, it must be usable when it supports the server side loading of data.


DataTables example, With server-side processing enabled, all paging, searching, ordering actions that DataTables by setting the serverSide option to true and providing an Ajax data source through the ajax option. This example shows a very simple table, matching the other examples, but in this https://cdn.datatables.net/1.10.21/js/​jquery. First of all, I am a beginner in coding.. I have a datatable (server-side processing) with a large number of rows. Now, I want to add href link in td of all the tr


DataTables example - Index column, A fairly common requirement for highly interactive tables which are displayed on the web is to have a column which with a 'counter' for the row number. Javascript; HTML; CSS; Ajax; Server-side script media/js/jquery. Orthogonal data · Generated content for a column · Custom data source property · Flat array data  Using server side processing is great when you have huge database. DataTables provide an efficient way to handle this situations, but integrating server side processing is a bit tricky. This tutorial is a step-by-step integration of famous Jquery Datatable with CodeIgniter.