[HELP] Datatable empty

[HELP] Datatable empty

MrOnizukaMrOnizuka Posts: 5Questions: 0Answers: 0
edited March 2015 in Free community support

Hello,

I have a very big problem, my datable can't fill,
here is my json file:

[
{
"IDClient": 1,
"Nom": "Name",
"Prenom": "Abracadabra",
"Adresse": "World",
"Age": "23",
"Email": "Mee@how.net"
}
]

And here's my js file, i am used a template:

var TableEditable = function () {

var handleTable = function () {


    function restoreRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);

        for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
            oTable.fnUpdate(aData[i], nRow, i, false);
        }

        oTable.fnDraw();
    }

    function editRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);
        jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
        jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
        jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
        jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
        jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
        jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
        jqTds[6].innerHTML = '<a class="edit" href="">Save</a>';
        jqTds[7].innerHTML = '<a class="cancel" href="">Cancel</a>';
    }

    function saveRow(oTable, nRow) {
        var jqInputs = $('input', nRow);
        oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
        oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
        oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
        oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
        oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
        oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
        oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 6, false);
        oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 7, false);
        oTable.fnDraw();
    }

    function cancelEditRow(oTable, nRow) {
        var jqInputs = $('input', nRow);
        oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
        oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
        oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
        oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
        oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
        oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
        oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 6, false);
        oTable.fnDraw();
    }

    var table = $('#sample_editable_1');



    var oTable = table.dataTable({

        //"ajax": "http://localhost:50876/ServiceClient1.asmx/GetList",

        "ajax": {
            "url": "http://localhost:50876/toto.txt",
            "dataType": "json",
            "aoColumnDefs": [
                { "aTargets": [0] },
                { "aTargets": [1] },
                { "aTargets": [2] },
                { "aTargets": [3] },
                { "aTargets": [4] },
                { "aTargets": [5] },
                ]
        },

          "lengthMenu": [
            [5, 15, 20, -1],
            [5, 15, 20, "All"] // change per page values here
        ],

        // Or you can use remote translation file
        //"language": {
        //   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
        //},

        // set the initial value
        "pageLength": 10,

        "language": {
            "lengthMenu": " _MENU_ records"
        },
        "columnDefs": [{ // set default column settings
            'orderable': true,
            'targets': [0]
        }, {
            "searchable": true,
            "targets": [0]
        }],
        "order": [
            [0, "asc"]
        ] // set first column as a default sort by asc
    });

    var tableWrapper = $("#sample_editable_1_wrapper");

    tableWrapper.find(".dataTables_length select").select2({
        showSearchInput: false //hide search box with special css class
    }); // initialize select2 dropdown

    var nEditing = null;
    var nNew = false;

    $('#sample_editable_1_new').click(function (e) {
        e.preventDefault();
        if (nNew && nEditing) {
            if (confirm("Previose row not saved. Do you want to save it ?")) {
                saveRow(oTable, nEditing); // save
                $(nEditing).find("td:first").html("Untitled");
                nEditing = null;
                nNew = false;

            } else {
                oTable.fnDeleteRow(nEditing); // cancel
                nEditing = null;
                nNew = false;

                return;
            }
        }

        var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
        var nRow = oTable.fnGetNodes(aiNew[0]);
        editRow(oTable, nRow);
        nEditing = nRow;
        nNew = true;
    });

    table.on('click', '.delete', function (e) {
        e.preventDefault();

        if (confirm("Are you sure to delete this row ?") == false) {
            return;
        }

        var nRow = $(this).parents('tr')[0];
        oTable.fnDeleteRow(nRow);
        alert("Deleted! Do not forget to do some ajax to sync with backend :)");
    });

    table.on('click', '.cancel', function (e) {
        e.preventDefault();
        if (nNew) {
            oTable.fnDeleteRow(nEditing);
            nEditing = null;
            nNew = false;
        } else {
            restoreRow(oTable, nEditing);
            nEditing = null;
        }
    });

    table.on('click', '.edit', function (e) {
        e.preventDefault();
        alert(oTable.length);
        alert(table.length);
        /* Get the row as a parent of the link that was clicked on */
        var nRow = $(this).parents('tr')[0];

        if (nEditing !== null && nEditing != nRow) {
            /* Currently editing - but not this row - restore the old before continuing to edit mode */
            restoreRow(oTable, nEditing);
            editRow(oTable, nRow);
            nEditing = nRow;
        } else if (nEditing == nRow && this.innerHTML == "Save") {
            /* Editing this row and want to save it */
            saveRow(oTable, nEditing);
            nEditing = null;
            alert("Updated! Do not forget to do some ajax to sync with backend :)");
        } else {
            /* No edit in progress - let's start one */
            editRow(oTable, nRow);
            nEditing = nRow;
        }
    });
}

return {

    //main function to initiate the module
    init: function () {
        handleTable();
    }

};

}();

Can you help me please ? I got stuck on this problem now 5 days.

Thanks you.

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Please take a look at this example which covers exactly what you are looking for (Ajax loaded data from a simple array of data, and object based data for each row).

    Allan

  • MrOnizukaMrOnizuka Posts: 5Questions: 0Answers: 0
    edited March 2015

    Thank you, it's working now.

    But how to use with fnAddData with those columns:

    "columns": [
    { "data": "IDClient" },
    { "data": "Nom" },
    { "data": "Prenom" },
    { "data": "Adresse" },
    { "data": "Editer", "sType": "html", "sDefaultContent": '<a href="" class="edit">Editera</a>' },
    { "data": "Supprimer", "sType": "html", "sDefaultContent": '<a href="" class="delete">Supprimer</a>' }
    ],

    and here is the var :

    var aiNew = oTable.fnAddData(['', '', '', '', '', '']);

    I have this error:

    http://prntscr.com/6lye3b

    Thank's

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    You are using fnAddData with an array, but you are loading your data initially as an object, and telling DataTables to expect objects through the use of columns.data.

    Give it an object, not an array.

    Allan

  • MrOnizukaMrOnizuka Posts: 5Questions: 0Answers: 0

    Ok, thank you for your reply
    But how to give fnAddData an object, not an array ?

  • MrOnizukaMrOnizuka Posts: 5Questions: 0Answers: 0

    Any help please ?

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Well, here you are giving it an array:

    oTable.fnAddData([ ... ]);

    You give it an object, you just pass in an object:

    oTable.fnAddData( { ... } );
    
  • MrOnizukaMrOnizuka Posts: 5Questions: 0Answers: 0
    edited March 2015

    Like this ?

    var aiNew = oTable.fnAddData({IDClient:'', Nom:'', Prenom:'', Adresse:'', Editer:'', Supprimer:''});

    It's working now allan, thank you but another problem, when i click on add new i have all textboxx with "undifined" prefilled
    Here is a screenshot: http://prntscr.com/6n9da7

    I have also this error when i would like to edit a line on datatable:

    Before click on edit (Editer) : http://prntscr.com/6n9e6g
    Alfter click : http://prntscr.com/6n9efc

    Please, i really need your help :(

    Thank's

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Yes like that.

    It looks like you need to update your code to use objects rather than arrays. It looks like this is based upon my blog post about editing in DataTables from years ago. That code uses the legacy API and has been completely surpassed by Editor.

    Allan

  • MrOnizukaMrOnizuka Posts: 5Questions: 0Answers: 0

    Can you give me a link allan please ?

    Thank you.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Editor.

    Allan

This discussion has been closed.