How to add rows / append to already initialized DT table

ucin

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

kthorngren

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

ucin

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!

ucin

This how it is

ucin

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

kthorngren

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

kthorngren

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

Kevin