Answers

• allan Posts: 66,145Questions: 1Answers: 11,029 Site admin

  October 31

  Hi,

  You are running into this FAQ:

  Q. I append a row to the table using appendChild(), but it is removed on redraw.

  You aren't using appendChild(), but it boils down to the same thing. Specifically, you are initialising the DataTable and then changing the DOM from under it.

  DataTables doesn't watch the DOM for .innerHTML changes made externally, so at the moment when you initialise the DataTable on #colours it has no data in it. Then you run populateTableRows and it uses .innerHTML to write the DOM rows in. But DataTables doesn't know that has happened!

  You could delay initialisation until the data has been written, but row.add() is perhaps a better option here.

            async function populateTableRows(colors){
                for(let i=0;i<colors.length;i++){
                  table.row.add({
                    id: i+1,
                    name: colors[i].name,
                    hex: colors[i].hex
                  });
                }
  
                table.draw();
            }
  

  And your DataTable init becomes:

         let table = new DataTable('#colours', {
            columns: [
              {data: 'id'},
              {data: 'name'},
              {data: 'hex'},
              {
                data: null,
                defaultContent: '',
                createdCell: (cell, cellData, rowData) => {
                  cell.style.backgroundColor = rowData.hex;
                }
              },
            ]
          });
  

  i.e. use row.add() to add objects of the data, and let DataTables create the DOM for you.

  https://live.datatables.net/butafeho/3/edit

  Allan
• u20241229 Posts: 9Questions: 4Answers: 0

  7:40AM

  Hi Allan,

  Thank you very much for your help. It is pretty incredible how you provide all of this for free, and even answer questions at 9pm on a Saturday night!

  That did the trick - thank you.

  If I could be cheeky to ask - that does now work - but there are a couple of issues:

  1. When I change the colour selection using the drop-down select menu at the top of the page, the content from the https://api.color.pizza/v1/ API is appended to the existing rows.

  2. Each time the selection changes, the number of colours from returned by the API when the selection changes, is added to N in the Showing 1 to 10 of N entries section.

  I did try changing the populateTableRows function to go from this:

  async function populateTableRows(colors) {
      for (let i = 0; i < colors.length; i++) {
          table.row.add({
              id: i + 1,
              name: colors[i].name,
              hex: colors[i].hex
          });
      }
      table.clear().draw();
      table.draw();
  }
  

  But that results in an empty table... I also tried:

  async function populateTableRows(colors) {
      for (let i = 0; i < colors.length; i++) {
          table.row.add({
              id: i + 1,
              name: colors[i].name,
              hex: colors[i].hex
          });
      }
      table.clear();
      table.draw();
  }
  

  But that also results in an empty table.

  Thanks again for your help

  Jim
• allan Posts: 66,145Questions: 1Answers: 11,029 Site admin

  8:31AM Answer ✓

  What I can I say - you spelt "colour" correctly

  You've got exactly the right idea with clear(), just calling it in the wrong place. If you do the clear, then add the rows, and finally draw the table, that will do what you are looking for: https://live.datatables.net/butafeho/4/edit .

  Allan
• u20241229 Posts: 9Questions: 4Answers: 0

  8:48AM

  Haha - yes - I did nearly use "color" when taking the original code from this Codepen but it jarred too much and had to go with the UK spelling.

  Thank you again Allan for your help and support and for providing such an incredible product. All sorted now

  Jim