Highlighting Selected Row
Highlighting Selected Row
jdadwilson
Posts: 127Questions: 30Answers: 1
I just started the process of converting the Admin area of my site from dataTables to DataTables. Everything seems to work fine except for one thing. When I select a row it does not highlight. Here is the initialization of the table...
// Initialize the dataTable
oTable = $('#adminTable').DataTable( {
ajaxSource: 'files_ajax/ajax_Announcements.php',
columns: [
{ data: 'min_heading', className: 'udatal', orderable: true, visible: true },
{ data: 'win_type', className: 'udatal', orderable: true, visible: true },
{ data: 'win_beg_datetime', className: 'udatac', orderable: true, visible: true },
{ data: 'win_end_datetime', className: 'udatac', orderable: true, visible: true },
{ data: 'win_id', className: 'udatal', orderable: false, visible: false }
], // End of aoColumns
dom: 'A<"top"lf>rt<"bottom"pi><"clear">',
language: { 'paginate': { 'previous': 'Prev' } },
lengthMenu: [15, 30, 60],
order: [],
paging: true,
pagingType: 'full_numbers',
select: { style: 'single' },
initComplete: function() {
this.api().alphabetSearch.recalc();
// Hide info areas if total records is less than 'length' number of rows
var wrapper = this.parent();
var tableInfo = oTable.page.info();
if ( tableInfo.recordsTotal <= tableInfo.length ) {
$('#myAlphabet').hide();
$('.adminTable_paginate', wrapper).hide();
$('.adminTable_filter', wrapper).hide();
$('.adminTable_info', wrapper).hide();
$('.adminTable_length', wrapper).hide();
}
} // End of fnInitComplete
}); // End of dataTable
According to the documentation the 'select' parameter should highlight each row as selected and remove the highlighting for other rows. This is the way dataTables worked.
TIA for any assistance
jdadwilson
This discussion has been closed.
Answers
Have you seen this example?
Thanks for your response.
The referenced example does not answer the issue. The example only relates to rollover action which I have provided for but does not address my desire. Maybe I was not specific enough in my description of the issue/desire.
My desire is that when a row is selected the high-light of the row would continue after the click (e.g., selection). The selection causes information from the ajax/json to populate a form for editing. Yes, I know the record could be edited in the table but some forms/tables contain 15-20 fields (some of which are structured as longtext).
I would love to provide a link to an example but unfortunately the situation comes from within the site admin area and the customer has very strict rules about access.
jdadwilson
I'm afraid I'm still not getting it :-). From your original post I would suggest that the Select CSS hasn't been loaded. This example shows how Select should work.
But your second post suggest you might be replacing the row, or some other kind of reload is going on? I'm not quite getting it (although it is late at night :-) ).
Allan