I have a datatable in each of my tabs. adding a record fails to add to the correct tab

drfunk

http://live.datatables.net/badekace/1/edit

kthorngren

You are assigning all the Datatables to the same table variable, for example the last Datatable initialized:

  $(document).ready(function() {
  var table = $('#modexcl5').DataTable();
....

This is the function for the first table:

    function addModule1() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );
 
      valid = checkRegexp( port, /^([0-9])+$/, "Port field only allow : 0-9" );
      //alert("Valid: " + valid);
      if ( valid ) {
          //alert("Name: " + mod.val());
          table.row.add( {
                  "Module":   mod.val(),
          } ).draw();
          dialog.dialog( "close" );
      }
      return valid;
    }

Its using the same table variable which is assigned to #modexcl5. There are lots of ways to fix this. The easiest is to use different variables, like table1, etc.

Kevin

drfunk

Thanks Kevin,

I used different vars for table but it is still adding to the last tab

http://live.datatables.net/duvusoti/1/edit

kthorngren

Looks like you have the same problem with the dialog form, for example:

    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,

The last one created is for the last table. I would look at creating one set of function to handle all the tables and pass in the table id instead of creating a set of similar functions for each table. This way you don't need table1, dialog1, table2, dialog2, etc. Will make it easier to add another tab.

Kevin

drfunk

ok can you show me how to pass in the table id?

kthorngren

Here is a simple example that calls a function to get the count of rows in the table:
http://live.datatables.net/xikegodo/1/edit

Kevin

drfunk

http://live.datatables.net/duvusoti/1/edit
getting "Script error. (line 0)"

kthorngren

Look at the browser's console not the JS Bin console tab. You will see this error:

Uncaught TypeError: this.closest is not a function

You have this:

 $(document).ready(function() {
   $('table.display').DataTable();
   var table = this.closest('table');

The this in the third line is provided by the click event in the example I provided. It won't work where you placed it. Without digging through your code to understand what you have done I don't have an answer of how to refactor it to do what you want. We will help with Datatables specific questions but Stack Overflow is a better resource for general Javascript coding.

Kevin