Fixed Column with Dynamic Ajax data

panatapattu

Hi,
I am having a question. I need to use Fixed Column data table in my project. Therefore I need to get body data dynamically from Ajax.

Here is my HTML code,

First name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail

My JS code,
$('#example').DataTable({
scrollY: "300px",
scrollX: true,
"ajax": getJsonData(),
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1
},
scrollX:true,
"paging": false,
"bFilter": false,
"bInfo": false,
"searching": false,
"bSort" : false
});

Get data function,

    function getJsonData() {

        $.ajax({
            url: "json data url",
            type: "GET",
            success: function (data) {
                loadJsonData(data);
            },
            error: function (request, status, error) {
                // error
            }
        });

    }

My guide data function,
function loadJsonData(data) {

        var obj = data;

        obj.xxx.forEach(function(item) {
            var element = $('<tr><td><div class="gc" data-url="'+ item.livelink +'"><img src="' + item.image + '"></div></td></tr>');

            if(item.other)
            {
                item.other.forEach(function(otherItem) {
                    if(otherItem.url != "0" && otherItem.title != "")
                    {                           
                        var otherElement = $('<td><div class="gc"  data-ourl="'+ otherItem.url +'"><p>' + otherItem.title + '</p></div></td>');
                        element.append(otherElement);                           
                    }
                    else if(otherItem.url != "0")
                    {
                        var otherElement = $('<td><div class="gc"  data-url="'+ otherItem.url +'"><p>' + otherItem.time + '</p></div></td>');
                        element.append(otherElement);   
                    }
                    else
                    {
                        var otherElement = $('<td><div class="gc"  data-url="'+ otherItem.url +'"><p>' + otherItem.time + '</p></div></td>');
                        element.append(otherElement);   
                    }
                });                   
            }

            $("#example tbody").append(element);

        });

Can anybody help me with this, to solve this out..?

Many Thanks

allan

See the FAQs. You cannot use append with a DataTable after the DataTable has been created. You must use the API.

If that is not the issue, then please give a link to a test case as required in the forum rules.

Allan

panatapattu

Hi Allan,

Thanks for your reply and I found a way to solve my previous problem.

I have another problem. In my project I am loading data from server side. Now it is perfectly working fine. But I am having another problem now.

What I am doing here is I have a <select> <option> panel. So, once I change the option I need to remove current content and load different content to the table. I am getting data from ajax call and loading to the table. The second time when I change the option, it is giving me this error.

DataTables warning: table id=xxx - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I checked the URL given but there is no good sound for me.

How can I fix this..?

allan

Are you using the ajax option to load the data into the table? If so, then use ajax.reload() or ajax.url().load() to load new data.

If you are not using the Ajax options then use rows().remove() to delete the old rows and rows.add() to add new rows.

Allan

panatapattu

Hi Allan,
This is the function I am calling when change the value using <select> <option>

function myContent(id3) {

var table = $('#tvGuide').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "myurl"+ id1 +"/"+ id2 +"/" + id3,
        "type": "POST"
    },
    "sScrollY": "300px",
    "scrollX":true,
    "paging": false,
    "bFilter": false,
    "bInfo": false,
    "searching": false,
    "bSort" : false,
    "fixedColumns":   true
});

}

allan

I would suggest calling the draw() method on change (which will reload the display since you are using server-side processing).

Allan