Replies

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  November 2014

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

  Allan
• rpmccormick Posts: 136Questions: 18Answers: 0

  November 2014

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  November 2014

  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 Posts: 136Questions: 18Answers: 0

  November 2014 edited November 2014

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  November 2014

  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