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

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    Thanks Kevin,

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

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited March 2022 Answer ✓

    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

Sign In or Register to comment.