Answers

• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  What should i do when only the body of the table is updated?
• kthorngren Posts: 21,555Questions: 26Answers: 4,994

  August 2021

  See this FAQ about how to tell Datatables about changes to the DOM (tbody).

  Kevin
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  I have some problems.
  1) I delete all the rows from tbody
  var friendDataTable = $('#friendTable').DataTable();
  friendDataTable.rows().remove().draw();
  2) then destroy the DataTable object
  friendDataTable.destroy();
  3) load new rows with data (table rows are filled in on the server and come already in the form of ready-made html markup)
  // Update tbody new rows with data
  $('#TbodyFriendTable').replaceWith(data);
  4) reinitialize the DataTable

  I have 2 filters in each column of the table - the old and the new filters
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  How reinitialize the DataTable:

  function UpdateTablePlagin () {

  $('#friendTable').DataTable({
  
      retrieve: true,
      paging: false,
      language: {
          url: "http://cdn.datatables.net/plug-ins/1.10.20/i18n/Russian.json"
      },
  
      initComplete: function () {
          this.api().columns([6, 8, 13, 14, 19, 21]).every(function () {
              var column = this;
              var select = $('<select><option value="">Все</option></select>')
                  .appendTo($($(column.header()))) //$(column.footer().empty())
                  .on('change', function () {
                      var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                      );
  
                      column
                          .search(val ? '^' + val + '$' : '', true, false)
                          .draw();
                  });
  
              $(select).click(function (e) {
                  e.stopPropagation();
              });
  
              column.data().unique().sort().each(function (d, j) {
                  if (column.search() === '^' + d + '$') {
                      select.append('<option value="' + d + '" selected="selected">' + d.substr(0, 30) + '</option>')
                  } else {
                      select.append('<option value="' + d + '">' + d.substr(0, 30) + '</option>')
                  }
              });
          });
      }
  });
  

  };
• kthorngren Posts: 21,555Questions: 26Answers: 4,994

  August 2021

  What you have seems like it should work. Without seeing the code running its hard to say what the problem might be.

  Have you looked at the browser's console for errors?

  Can you post a link to your page or a test case replicating the issue so we can help debug?
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  There are no errors.
  It does not remove old filters and adds new ones

  This is full code:
  http://live.datatables.net/cuxeyuja/2/edit
• kthorngren Posts: 21,555Questions: 26Answers: 4,994

  August 2021

  I updated your test case with sample data and a button click event to use your success function code. The result of calling UpdateTablePlagin() is that the updated select option input is appended to the previous. The list is correct but now you have two. You will need to remove the previous list first assuming this is the same problem you are seeing.
  http://live.datatables.net/cuxeyuja/3/edit

  If you have a different issue then please update the test case to show the issue.

  Kevin
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  Yes Kevin, that's the problem. Old filters and sorters are not removed.
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  How can I remove old filters and sorters?
• allan Posts: 63,816Questions: 1Answers: 10,517 Site admin

  August 2021

  I would suggest modifying your code a little, so that it would check to see if there is a select element already in the column header. If there is, then empty and use it. If not, then create one and append it to the header.

  You'll likely also want to remove the event handlers you add to the select elements on each recreate - so the old ones don't get triggered again! That would be a sure fire path to madness.

  Finally, I'm not sure you need to actually destroy and create the table each time. You are just changing the data in the table, not the columns or options. So you could use rows().remove() and rows.add() and then regenerate your options based on that, which would be much more efficient.

  Allan
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  Could you show in this example how you see it? live.datatables.net/cuxeyuja/4/edit
• allan Posts: 63,816Questions: 1Answers: 10,517 Site admin

  August 2021

  Developing the code for this would fall under out support packages.

  Allan
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  Does this require changes to the Databloss library?
• kthorngren Posts: 21,555Questions: 26Answers: 4,994

  August 2021 edited August 2021 Answer ✓

  Does this require changes to the Databloss library?

  No.

  You are already using rows().remove() in your success function. Replace the friendDataTable.destroy(); with rows.add(), something like this:

  friendDataTable.rows.add( $(data) ).draw();
  

  Note the use of a jQuery object to add the rows. Note the rows.add() docs state this:

  Each data element may be an array, object, Javascript object instance or a tr element.

  You may need to modify thee returned HTML data, ie, don't return the tbody tag. You will then need to move the initComplete code into a function and call it to update the select inputs.

  Kevin
• vladi Posts: 18Questions: 4Answers: 0

  August 2021

  ! You are already using rows().remove() in your success function. Replace the friendDataTable.destroy(); with rows.add(), something like this:

  Thank you very much, Kevin! I will try it