Responsive Extention, hidden tables on load.

rpmccormick

The responsive Extension doesn't seem to work with JQuery Accordion very well. I assume it would have the same issues with Tabs and other tables that are hidden on load. I have been trying to code a work-around for hours... things like this:

$("#accordion").accordion( {
activate: function( event, ui ) {
$('div.dataTables_scrollBody>table.display', ui.panel).dataTable().fnAdjustColumnSizing();
//or maybe just $('#example').dataTable().fnAdjustColumnSizing();
}
});

No luck. Please see if you can help. Here is a JSFiddle: http://jsfiddle.net/76eok9pk/

You will see some very wacky behavior. On my system only the top table works, and if you set "active":false on the accordion so all expands are hidden onload, then none of the tables work. On this JSFiddle I have seen both work, only the top, and only the bottom depending on window size and active tab when you run it. Switching tabs after a resize is buggy as well, but I can live with it as I don't expect people to resize much, but I do need all of the tables in my 5 accordion panels to look good on both desktop and mobile.

Thanks.

allan

You need to use the responsive.recalc() method to recalculate the display when the table is make visible. Updated example.

Allan

rpmccormick

Awesome, thanks. I had missed the that page in the manual with
responsive.index() and responsive.recalc().

I took the advice in the documentation and did a columns.adjust() first. I also found that I got smoother behavior by adding those to both the accordion's Activate and the beforeActivate.

I am having another issue on that page as well, but it is harder to duplicate in jsfiddle... I have a special-case result editor as follows:

function customRowCallback(nRow, aData, iDisplayIndex)
{if (aData['Vehicles'] == "Car,Truck,Van,Bike")
{$('td:nth-child(3)', nRow).html('All Vehicles');}
//also tried with eq instead of nth-child
}

The issue is that it is not always rendered to the correct column (3). Sometimes it works for all tables, usually it is either wrong for the first table in the accordion and right for the others (or visa-versa). I have also seen it be wrong for a new row that was just added using editor but the other rows are fine.

This issue started when adding responsive and classes: all, never, none.

Do you have any idea where I could attach more "$('#example').DataTable().columns.adjust().responsive.recalc();" to possibly fix the issue?

allan

The nth-child selector you are using will operate on the visible columns. It sounds like you might need to use column.index() to convert from the data index to the visible index and use the visible index in your selector.

Alternatively you could use cell().node() to get the cell node from the row node and a column select (3 in this case).

Allan

rpmccormick

Thanks again, I actually killed "customRowCallback" and did it in the columns render instead. I wonder... do I need stuff in ColumnDefs at all, or can I move all those renders in to just columns too?

Anyway, last question: My tables are fairly small (max is less than 30 rows) but I do have 8 of them on a page. The page takes about 8 seconds to load, and I am afraid it will only get worse and the tables reach 1000's of rows. I just tried added delayed render option, but it seemed to make no difference. How can I make the page load faster? Here is one of my 8 tables:

[code]
//Drivers

var driveedit = new $.fn.dataTable.Editor(
 {"ajax": "/DataTables/media/php/table.OWLDrivers.php",
  "table": "#OWLDrivers",
  "fields": [ {"label": "ID",           "name": "DriverID",         "type": "display"},
              {"label": "Partner",      "name": "PartnerID",        "type": "select"},
              {"label": "UserName",     "name": "DriverName",       "type": "text"},
              {"label": "E-Mail",       "name": "DriverEMail",      "type": "text"},
              {"label": "SMS",          "name": "DriverSMS",        "type": "text"},
              {"label": "Phone",        "name": "DriverPhone",      "type": "text"},
              {"label": "First Name",   "name": "DriverFirstName",  "type": "text"},
              {"label": "Last Name",    "name": "DriverLastName",   "type": "text"},
              {"label": "Notes",        "name": "DriverNotes",      "type": "textarea"}
            ]
 } );

driveedit.on('initCreate', function (e, json, data)
 {var id = generateID((new Date).getTime()).toString();
  driveedit.field('DriverID').set(id.substring('0','3') + '-' + id.substring('3','8'));
 }          );

$('#OWLDrivers').dataTable(
 {"dom": "Tfrtlip",
  "ajax": "/DataTables/media/php/table.OWLDrivers.php",
  "deferRender": true,
  "columns": [ {"data": "DriverPhoto"},
               {"data": "PartnerID"},
               {"data": "DriverID"},
               {"data": "DriverName"},
               {"data": null, "render": function (data, type, row) {return data.DriverFirstName + ' ' + data.DriverLastName;} },
               {"data": "DriverEMail"},
               {"data": "DriverPhone"},
               {"data": "DriverSMS"},
               {"data": "DriverNotes"},
               {"data": "DriverLat"},
               {"data": "DriverLng"},
               {"data": null},
               {"data": "DriverUpdate"},
               {"data": "DriverStatus"},
               {"data": null}
             ],
  "columnDefs": [ //Status Colors
                  {"targets": -2,
                   "data": null,
                   "render": function(data, type, row)
                              {var textColor = '#000';
                               switch (row["DriverStatus"])
                                {case 'New': textColor = '#090'; break; //Green
                                 case 'Active': textColor = '#000'; break; //Black
                                 case 'Inactive': textColor = '#ccc'; break; //Gray
                                 case 'Restricted': textColor = '#900'; break; //Red
                                 default: textColor = '#000'; break; //Black
                                }
                               return "<div style=\"color:" + textColor + ";\">" + data + "</div>";
                              }
                  },
                  //Details Button
                  {"targets": -1,
                   "data": null,
                   "defaultContent": "<input type=\"button\" class=\"btn btn-danger\" value=\"Driver Dash\">"
                  },
                  //(+) expand
                  {"targets": 0,
                   "data": null,
                   "className": 'control',
                   "orderable": false
                  }
                ],
  "tableTools": {"sRowSelect": "os",
                 "aButtons": [ { "sExtends": "editor_create", "editor": driveedit },
                               { "sExtends": "editor_edit",   "editor": driveedit },
                               { "sExtends": "editor_remove", "editor": driveedit }
                             ]
                },
  "responsive": { "details": {"type": "column"} },
  "order": [1, 'asc'],
  "fnRowCallback": driverRowCallback
 } );

function driverRowCallback(nRow, aData, iDisplayIndex)
 {//Photo
  $('td:eq(0)', nRow).html( '<img style="width: 36px; height: 36px;" src="' + aData["DriverPhoto"] + '" />' );
  //Map
  getmaplink(aData["DriverLat"], aData["DriverLng"]);
  $('td:eq(10)', nRow).html('<a target="faremap" href="http://www.google.com/maps/@' + aData["DriverLat"] + ',' + aData["DriverLng"] + ',16z">' + mapLinkName + '</a>');
 }

 // Handler for button click
 $("#OWLDrivers tbody").on('click', 'input', function (e) {
    var id = $(this).parents('tr').attr('id').substring(4, 13);
    window.location = 'DriverDash.aspx?DriverID=' + id;
 });

[/code]

(I still need to kill the rowcallback on this one) Thanks for any help you can provide.

EDIT: I can't seem to get it to see the line breaks on this forum. When I edit this post though there are proper line breaks, so hopefully you can edit my post and see them.

allan

I wonder... do I need stuff in ColumnDefs at all, or can I move all those renders in to just columns too?

Yup - up to you how you arrange it :-).

Regarding the speed issue: are you able to link to the page so I can debug it? Otherwise I think you'll need to experiment a little to see what is causing the problem How long does the Ajax data take to return and how much times for the row callback function add are the two big questions I'd say.

Allan