Saturday, April 2, 2016

JQuery Datatables makeEditable() issues with large dataset

By Hường Hana 5:00 PM , , , Leave a Comment

I'm following this tutorial to implement cell editing in JQuery datatables with MVC4.

Links to the plugins used are:

  1. jQuery DataTables plug-in v1.7.5., including the optional DataTables CSS style-sheets used for applying the default styles on the page
  2. jQuery Jeditable plug-in v1.6.2., required for inline cell editing
  3. jQuery validation plug-in v1.7., for implementation of client-side validation
  4. jQuery DataTables Editable plug-in that integrates all these mentioned plug-ins into a fully functional editable datatable.

To achieve the effect of creating the editable datatable you simply have to include the following as part of your script

<script>     $(document).ready(function () {        $('#myDataTable').dataTable().makeEditable();     }); </script>

The Problem

For each column present in the grid an event is created in the DOM to allow editing.

Where the dataset is very large this has proven to cause significant issues even crashing my browser.

The overall question

Is it possible to only call the edit logic when the user selects the appropriate column rather than trying to build up a large amount of events in the DOM?

5 Answers

Answers 1

I don't use makeEditable() with very large datasets, but you might get a performance benefit from an uplift of some of your versions. I am using:

  • jquery 1.6.4
  • datatables 1.8.2
  • jeditable 1.7.3
  • jQuery Validation Plugin 1.11.1
  • datatables.editable 2.3.1

Answers 2

One alternative is add the event when the user clicking in the td.

$(document).ready(function() {      oTable = $('#example').dataTable();      $("#example td").on("click",function(){         $(this).editable();     })  });

Example: https://jsfiddle.net/cmedina/7kfmyw6x/32/

Now, if you do not want to edit all the columns you can assign the event editable only for some columns per class

var oTable = $('#table_id').dataTable(     {          "bSort": false,          "sPaginationType": "full_numbers",     });  $('td.editable_class', oTable.fnGetNodes()).editable('editable.php', { "callback": function( sValue, y ) {     var aPos = oTable.fnGetPosition( this );     oTable.fnUpdate( sValue, aPos[0], aPos[1] ); }, "submitdata": function ( value, settings ) {     return {         "row_id": $(this).data('id'),         "column": $(this).data('column'),     }; }, "height": "17px", "width": "100%", });

Answers 3

You can make the td editable on click:

$("#example td").on("click",function(){     $(this).editable(); })

Answers 4

In addition to @CMedina 's answer, please read:

.on() - Direct and delegated events

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored.

On a data table with 1,000 td elements in #example, this example attaches a handler to 1,000 elements:

$("#example td").on("click",function(){     $(this).editable(); })

An event-delegation approach attaches an event handler to only one element, the #example, and the event only needs to bubble up one level (from the clicked td to #example):

$("#example").on("click", "td", function(){     $(this).editable(); })

Answers 5

I'm not familiar with this library, however i suggest to check if the views and stored procedure is supported, after that you can customize the number of columns required.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment