How to add rows / append to already initialized DT table

How to add rows / append to already initialized DT table

ucinucin Posts: 13Questions: 4Answers: 0
edited January 2022 in DataTables 1.10

Hello All,

So i have two buttons on my page(both having separate onClick functions to go to) , when I click the first, it runs the first ajax and appends the data. When I click the second , the expected result would be to have the data appended to the same table , but as you can guess that's not what's happening.

First click ,all good . Data is being displayed with zero problems.

My issue is with the second button , if I initialize the table and hit the button everything works great.

the whole thing does two things, button 1 brings first rows, button 2 brings the rest.

let dataTable; 
function button1() {
        dataTable = $('#resTbl').DataTable({
            destroy: true,
            "scrollY": "650px",
            "scrollCollapse": true,
            "paging":         false,
            dom: 'Bfrtip',
            buttons: ['csv'],
            aaSorting: [],
        ajax : {
            url: '/someURL',    
            type: 'post',
            error: function (error) {
                alert(error.responseText)
            },
         
            data : function (data) {
               
              data.vars to send 
                
                },
            
           
            dataSrc: '',
        
                   
            },
            aaSorting: [],
            
            columns: [
                {"data": 'id'},
                {"data": 'name'},
                {"data": 'title'},
                {"data": 'b.day'},
                ],
                "columnDefs": [{
                "defaultContent": "",
                "targets": "_all"
                }],   

            
        })
       
       
  
    }

function button2() {
dataTable = $('#resTbl').DataTable()       // not sure if this is the right place 
  $.ajax ({
        
            url: 'someURL',    
            type: 'post',
            error: function (error) {
                alert(error.responseText)
            },
           
            data : {
               
             data.vars to send 
                
                },
            
           
            dataSrc: '',
        

        success: function (data) {
            $.each(data, function(i, item) {
                console.log(data[i].id)
                dataTable.row.add(
                  
                [ 
                data[0].id,
                data[0].name,
                data[0].title
                data[0].b.day
            ]).draw()
            })
        
            
        } 

        
    })

}

May have misplaced some of the brackets during copy/pasting. As I mentioned , both button clicks works great on their own nothing too fancy about it . The issue is ,when I populate the table from button1 and click button2 after, it only adds a row without values . But the values are visible on the browser console. Any help is appreciated

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited January 2022

    You have console.log(data[i].id). but are using data[0].id, in row.add(). Probably need to use data[i].id,. I would remove .draw() from line 79 and use draw() after the loop so the table is drawn once instead of the number of times through the loop.

    If you still need help then post the data response in the success function so we can see what you are receiving.

    Kevin

  • ucinucin Posts: 13Questions: 4Answers: 0

    Hi Kevin, yes I made a mistake while refactoring the code to be more presentable here. The correct iteration was data[i].xxxx . That being said, wherever I placed the .draw() API has not made any difference. Anytime I try to row.add() ,it just adds a blank row with no values. I can append data the html way as

    for (let i = 0; i < result.length; i++) {
        added_row = '<tr>'
            + '<td>' + result[i].id + '</td>'
            + '<td>' + result[i].workoutName + '</td>'
            + '<td>' + result[i].qryOrd + '</td>'
            + '<td>' + result[i].order + '</td>'
     + '</tr>'
           $("#resTbl").append(added_row)
    

    but then when I download the table as .csv those rows do not appear :)

    below is the exact response I receive ,copied from the browser console ;

    [{…}]
    0:
    equipment: "BW"
    hafta: "1"
    id: "4795"
    order: 10
    qryOrd: 1
    repeat: 1
    rest: 0
    seviye: "1"
    tekrarSn: "1"
    weekDays: "1"
    workout: "LISS 1"
    workoutLevel: "Level 9"
    workoutName: "Walking"
    workoutPrefDay: "Monday"
    

    maybe it's how I initiate the DataTable or something else...

    Thanks in advance!

  • ucinucin Posts: 13Questions: 4Answers: 0

    This how it is

  • ucinucin Posts: 13Questions: 4Answers: 0

    small update , I just changed the code like this (still uses regular <tr>...</tr> method)

    $('#resTbl').DataTable().row.add($(added_row).get(0)).draw()
    

    although I don't fully understand the logic ,it works

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Please provide a test case with an example of your data and the success code you are using. This will allow us to help debug. We don't need the ajax request.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited January 2022

    I built a simple example based on your code snippets. It works:
    http://live.datatables.net/wolilenu/1/edit

    Kevin

Sign In or Register to comment.