problem with "columnDefs" on DataTables

thippeswamydc

I'm trying to put button for each row in separate column on data table using JS
code looks fine for me but cannot see change on the data table

 function getFormDataFromServer()
    {
        console.log("-------------------------------getFormDataFromServer method is called");
        var table="<table id='tableData' class='display table table-striped table-border' style:'width:100%'>";
        table+="<thead><tr>";
        table+="<th>Id</th>";
        table+="<th>Name</th>";
        table+="<th>start date</th>";
        table+="<th>end date</th>";
        table+="<th>created on</th>";
        table+="<th>description</th>";
        table+="<th>created by</th>";
        table+="</tr></thead></table>";
        $('#tableDiv').html(table);
        AUI().use('aui-io-request',function(A){
            A.io.request('${serveResource}',
             {
                method:'get',
                data:{'<portlet:namespace/>action':'getTableData'},
                on:{
                        success:function()
                        {

                            var data=this.get('responseData');
                            data=JSON.parse(data);
                           var defaultColumnTypes=[{"data":null, "defaultContent":"<button>Update</button>","targets":-1}];


                            var obj={"ajax":data,"columnsDefs":defaultColumnTypes,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};

                            $("#tableData").DataTable(obj);
                        },
                    failure:function()
                    {
                        alert("ajax failure: cannot able to get the data from server, something went wrong");
                    }
                   }
            });
        });
    } 

link: https://datatables.net/reference/option/columns.defaultContent

colin

Hi @thippeswamydc ,

It looks like you haven't got an extra column for those buttons. Try changing line 13 to be

table+="<th></th></tr></thead></table>";

If no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

thippeswamydc

It did not work, Please refer this: live.datatables.net/gudukuci/1/edit

data from server in gson:
[{"name":"testtaskname","description":"estst","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":1},{"name":"testtaskname","description":"sdf","user":"sdf","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":2},{"name":"testtaskname","description":"fs","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":3},{"name":"testtaskname","description":"df","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":4},{"name":"add task","description":"updating the database","user":"thippu","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":5},{"name":"creating the datatable","description":"using bootstrap\u0027s","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":6},{"name":"task10","description":"check","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":7},{"name":"task11","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":8},{"name":"task12","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":9},{"name":"task13","description":"check","user":"thippu","start_date":"2019-03-13","end_date":"2019-05-17","created_on":"2019-05-28","id":10},{"name":"creating the datatable","description":"updating the database","user":"testuser","start_date":"2019-06-18","end_date":"2019-06-21","created_on":"2019-06-01","id":11},{"name":"abc task","description":"checking the servlet","user":"user","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":12},{"name":"task demo","description":"description of task is checking the code is reaching or not to server","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":13},{"name":"task demo2","description":"checking the action value","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":14},{"name":"task demo","description":"checking the data","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":15},{"name":"task demo","description":"ggj","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":16},{"name":"demo project","description":"description","user":"thippu","start_date":"2019-06-03","end_date":"2019-06-03","created_on":"2019-06-03","id":17}]

kthorngren

In your example data is a Javascript object not a string resulting in the following error in the browser's console:

Uncaught SyntaxError: Unexpected token o in JSON at position 1

I turned it into a string and it works here:
http://live.datatables.net/mazilisi/1/edit

I'm not sure of all the details but I think the problem has to do with the way Datatables builds the columns when using objects. My suggestion is to define the button within the columns option not the columnDefs as shown in my example.

Kevin

thippeswamydc

Thanks Kevin,
I'll follow your suggestion.
It helped me a lot.