Server side rendering appends data again and again on searching or sorting the table

abhishek10281

$('#leads_list').DataTable({
                "dom": 'Bfrtip',
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: url,
                    type: 'GET',
                    headers:{'Content-Type':'application/json','X-EV-KEY':ev_key},
                    dataFilter:function(resp){
                    
                        var resp = JSON.parse(resp);
                        var len = resp.length;
                    
                        $.each(resp.data,function(key,lead){
                        
                            var createdAt  = moment(lead.createdAt).format('DD-MM-YY');
                            lead.createdAt = createdAt;
                            var status = '';
                            
                            if(!lead.userDesignation)
                            {
                                lead.userDesignation = '';
                            }
                            
                            switch(lead.leadStatus)
                            {
                                case    0 : status = 'pending';
                                            break;
                                case    1 : status =  'approved';
                                            break;
                            }
                            
                            lead.leadStatus = status;
                            leads.push(lead);
                        
                        });
                        
                        leads_resp.data  = leads;
                        leads=[];
                        leads_resp.iRecordsTotal = len;
                        leads_resp.iRecordsDisplay = len;
                        return JSON.stringify(leads_resp);
                    
                    }
                },
                "sPaginationType": "simple",
                "columns": [
                    {"data": "userName"}, 
                    {"data": "userDesignation"},
                    {"data": "leadSource"},
                    {"data": "leadType"},
                    {"data": null,}
                ],
                "columnDefs": [ {
                    "targets": -1,
                    "data": "userId",
                    "defaultContent": "<button class='btn btn-primary' data-user-id='userId'>Update</button>"
                }],
                "buttons": [
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                     'copy', 'csv', 'excel', 'pdf'
                    ]
                }]
            
            });
           
        });

i dont understand whats wrong with it and also how do i add data attribute to the button in the row dynamically on api load?

kthorngren

Server side rendering appends data again and again on searching or sorting the table

Not sure what you mean by this. Are you saying that for each search or sort Datatables is fetching data (expected behavior) or that the table grows from 10 rows to 20 rows, etc?

Please describe, in more detail, the issue you are seeing.

columns.render may be what you are looking for to dynamically set the data attribute for each row. Take a look at the examples to see if they help.

Kevin