Answers

• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  January 2022

  This example shows how to create click event handlers and get the row data of the clicked row. The data can then be used to create an HTML table or Datatable.

  Kevin
• Lucaslopez12 Posts: 14Questions: 6Answers: 0

  January 2022

  Thanks Kevin. It works but i dont know how create other table. It can be used HTML createElement in this DataTable?

  Or how would you?
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  January 2022

  What I want to achieve is that when I click on the product field, I create a new table with only the model of that product and the quantity

  Do you want to create a new HTML table on the same page or a new Datatalbe on the same page?

  You can search for tutorials to use Javascript to dynamically create new tables.

  This example shows how to create a Datatable with Javascript data, data from the click event for example. Click the HTML tab and you will see that all Datatables needs is a table element and the example uses columns.title to create the headers.

  Kevin
• Lucaslopez12 Posts: 14Questions: 6Answers: 0

  January 2022 edited January 2022

  Thanks!

  $(document).ready(function() {
      var table = $('#sellersQuantityTable').DataTable();
       
      $('#sellersQuantityTable tbody').on('click', 'tr', function () {
          var dataNew = table.row( this ).data();
          console.log(dataNew);
      } );
  

  With this I can get the data in a json from where I click, but I can't send it to the new table. What am I doing wrong?

  My new table:

  $(document).ready(function() {
      $('#example2').DataTable( {
          data: dataNew,
          columns: [
              { title: "Name" },
              { title: "Position" },
              { title: "Office" },
              { title: "Extn." },
              { title: "Start date" },
              { title: "Salary" }
          ]
      } );
  } )
  

  In HTML:

         <table id="example2" class="display" width="100%"></table>
  

  Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  January 2022 edited January 2022 Answer ✓

  Use the triple back ticks as on new lines as described below the Post Comment button to format blocks of code.

  Looks like you are initializing the Datatable before you want to add the data. So instead of using data to load the data you can remove data: dataNew, and initialize an empty Datatable.

  In the click event you can use clear() followed by row.add() to clear then add the rows to the Datatable. Something like this:

      $('#sellersQuantityTable tbody').on('click', 'tr', function () {
          var dataNew = table.row( this ).data();
  
          var table2 = $('#example2').DataTable();
          table2.clear();
          table2.row.add( dataNew ).draw();
      } );
  

  You will need to define columns.data to match your source data (newData) data structure.

  Kevin