what is the best way to implement column_counter functionality ?

[codemilan]

In my js file as per datatable doc 'http://www.datatables.net/examples/api/counter_columns.html':

    $(document).on('ready page:load', function() {
      var t = $('#uploaded_songs_table').dataTable({
      "processing": true,
      "serverSide": true,
      "ajax": $('#uploaded_songs_table').data('source'),
      "pagingType": 'full_numbers',
      "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();
  });

In datatable file:

def_delegator :@view, :tag
def data
    records.map do |record|
      [
        tag("td"),
        best_in_place(record, :title),
        best_in_place(record, :song_name),
      ]
    end
end

but i get these error:
ERROR TypeError: can't convert nil into an exact number
/home/milan/.rvm/gems/ruby-2.1.2/gems/activesupport-4.1.4/lib/active_support/core_ext/time/calculations.rb:218:in -' /home/milan/.rvm/gems/ruby-2.1.2/gems/activesupport-4.1.4/lib/active_support/core_ext/time/calculations.rb:218:inminus_with_duration'
/home/milan/.rvm/gems/ruby-2.1.2/gems/activesupport-4.1.4/lib/active_support/core_ext/time/calculations.rb:229:in `minus_with_coercion'

[antillas21]

@coderawal it is very likely that you only need to return an empty (nil) value for the first item in the 2D array returned by the data method.

So, I would try doing this:

def data
  records.map do |record|
    [
      nil,
      best_in_place(record, :title),
      best_in_place(record, :song_name)
    ]
  end
end

Please note this is an assumption, given the documentation you refer to, performs an HTML replacement for the first <td> tag inside the datatable html body rows... so you need to make sure an empty <td> tag exists... when returning data from a child class that inherits from AjaxDatatablesRails::Base, all rows inside the 2D array, are mapped to a <td>row content</td> tag through the jQuery plugin... so, returning nil will draw an empty <td> tag.

[codemilan]

Thanks, this worked, but when i change pagelength from drop down the counter doesn't work my new js code is below, although i kept oSettings.bLengthChange in if condition and kept bPagination: true in initialization it didn't work.Below code works fine for sorting, filtering, pagination). In previous js code it was showing error(no syntax) in draw() method what is the reason ? (datatable version 1.10.3):

$(document).on('ready page:load', function() {
  var t = $('#songs_table').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": $('#songs_table').data('source'),
    "pagingType": 'full_numbers',
    "fnDrawCallback": function ( oSettings ) {
      /* Need to redo the counters if filtered or sorted */
      if ( oSettings.bSorted || oSettings.bFiltered )
      {
        for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
        {
          $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
        }
      }
    },
    "aoColumnDefs": [
      { "bSortable": false, "aTargets": [ 0 ] }
    ],
    "aaSorting": [[ 1, 'asc' ]]
    });
    $('.xhr_success').bind("ajax:success", function () { t.fnDraw(); });
});

[antillas21]

@coderawal I have never played with the functionality you're trying to implement, but it looks like you're mixing syntax from 2 different versions of the jQuery plugin in your code sample.

If I recall correctly, jQuery.dataTables version 1.10 uses camelCase for all params and variables, like you have in the lines of: processing, serverSide, ajax, pagingType; while jQuery.dataTables version 1.9 uses hungarian notation for params and variables, like you have in the lines of: oSettings.bSorted, oSettings.aoData, oSettings.aiDisplay.

According to the documentation you linked earlier: http://www.datatables.net/examples/api/counter_columns.html, the code is not complicated to implement, once you have the proper values returned.

[codemilan]

Thanks for suggestion antillas21

[antillas21]

@coderawal I gave this a try after reading the documentation and forum posts at the datatables site... dataTables author recommendation is to modify the data at the server as his comment here: https://datatables.net/forums/discussion/comment/60234/#Comment_60234

So... I came up with this... the following example assumes we have a Client model and we need to present only 2 attributes in the datatable object (name, email)... we'll just modify the datatable class like this:

def data
  outer = []
    records.each_with_index do |record, idx|
      outer << [
                 idx + 1,
                 record.name,
                 record.email
               ]
  end
  outer
end

<table id="clients-table" data-source="<%= clients_path(format: :json) %>">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>

  <tbody>
  </tbody>
</table>

Notice we are returning 3 columns where the first one is a dynamic number resulting from adding 1 to the index number in the array of results that the record is at.

Hope this helps.

[codemilan]

fantastic logic but when i click show entries dropdown, the counter column disappears and after clickinng on other sortable or pagination links it appears.

[antillas21]

Yes... I noticed the same behavior... don't have a valid answer as to why, I'm sorry.

[codemilan]

Now I'm getting 'no implicit conversion from nil to integer' 500 error
on line "records.each_with_index do |record, idx|"

[buncis]

any update on this?

[n-rodriguez]

I close this one because of the more recent issue about the same subject : #259