"aoColumns" not working datatable jquery 1.10.3

Cuong Pham

Hi everyone,

I'm using datatable jquery version 1.10.3 and I have a problem with edit column and my table doesn't show dropdownlist.
I tried to add "aoColumns" with 2 ways:

1. Add to dataTable(.....)

var tbMaster = $('#tblMaster').dataTable({
"aoColumns": [
{
indicator: 'Saving platforms...',
tooltip: 'Click để sửa tên',
type: 'textbox',
submit: 'Save changes',
fnOnCellUpdated: function (sStatus, sValue, settings) {
alert("(Cell Callback): Cell is updated with value " + sValue);
}
},
null,
null,
null,
null,
{
indicator: 'Đang lưu nhân viên...',
tooltip: 'Click để sửa nhân viên',
type: 'textarea',
submit: 'Save changes',
fnOnCellUpdated: function (sStatus, sValue, settings) {
alert("(Cell Callback): Cell is updated with value " + sValue);
}
},
{
indicator: 'Saving...',
tooltip: 'Click to edit',
type: 'textarea',
submit: 'Save changes',
fnOnCellUpdated: function (sStatus, sValue, settings) {
alert("(Cell Callback): Cell is updated with value " + sValue);
}
},
],
"sPaginationType": "full_numbers",
"bProcessing": false,
"language": {
"lengthMenu": "Hiển thị MENU dòng trên trang",
"zeroRecords": "Không tìm thấy dữ liệu",
"info": "Hiển thị trang PAGE của PAGES",
"infoEmpty": "Không có dữ liệu",
"infoFiltered": "(Lọc từ MAX dòng)",
"sSearch": "Tìm kiếm: "
},
"order": [[6, "desc"]],

    }).makeEditable({
        sUpdateURL: "/Manager/UpdateData",
        sAddURL: "/Manager/AddData",
        sDeleteURL: "/Manager/DeleteData",

        sAddNewRowFormId: "formAddProject",
        sAddNewRowButtonId: "btnAddNew",
        sAddNewRowOkButtonId: "btnAddNewOk",
        sAddNewRowCancelButtonId: "btnAddNewCancel",
        sDeleteRowButtonId: "btnDelete",

        oAddNewRowOkButtonOptions: {
            label: "Confirm",
            icons: { primary: 'ui-icon-check' },
            name: "action",
            width: 55,
            height: 25,
            text: "Tạo",
            value: "add-new"
        },
        oAddNewRowCancelButtonOptions: {
            label: "Close",
            class: "back-class",
            name: "action",
            width: 55,
            height: 25,
            text: "Đóng",
            value: "cancel-add",
            icons: { primary: 'ui-icon-close' }
        },
        oAddNewRowFormOptions: { title: 'Tạo Dự Án Mới', width: 800,  },


        fnShowError: function (message, action) {
            switch (action) {
                case "update":
                    jAlert(message, "Update failed");
                    break;
                case "delete":
                    jAlert(message, "Delete failed");
                    break;
                case "add":
                    $("#lblAddError").html(message);
                    $("#lblAddError").show();
                    break;
            }
        },
        fnStartProcessingMode: function () {
            $("#projectNotify").dialog();
        },
        fnEndProcessingMode: function () {
            $("#projectNotify").dialog("close");
        }
    });

1. Add to makeEditable(....)

var tbMaster = $('#tblMaster').dataTable({
"sPaginationType": "full_numbers",
"bProcessing": false,
"language": {
"lengthMenu": "Hiển thị MENU dòng trên trang",
"zeroRecords": "Không tìm thấy dữ liệu",
"info": "Hiển thị trang PAGE của PAGES",
"infoEmpty": "Không có dữ liệu",
"infoFiltered": "(Lọc từ MAX dòng)",
"sSearch": "Tìm kiếm: "
},
"order": [[6, "desc"]],

    }).makeEditable({
        sUpdateURL: "/Manager/UpdateData",
        sAddURL: "/Manager/AddData",
        sDeleteURL: "/Manager/DeleteData",

        "aoColumns": [
            {
                indicator: 'Saving platforms...',
                tooltip: 'Click để sửa tên',
                type: 'textbox',
                submit: 'Save changes',
                fnOnCellUpdated: function (sStatus, sValue, settings) {
                    alert("(Cell Callback): Cell is updated with value " + sValue);
                }
            },
            null,
            null,
            null,
            {
                indicator: 'Saving...',
                tooltip: 'Click to edit',
                loadtext: 'loading...',
                type: 'select',
                onblur: 'submit',
                data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                sUpdateURL: function (value, settings) {
                    alert("Custom function for posting results");
                    return value;

                }
            },
            {
                indicator: 'Saving...',
                tooltip: 'Click to edit',
                type: 'textarea',
                submit: 'Save changes',
                fnOnCellUpdated: function (sStatus, sValue, settings) {
                    alert("(Cell Callback): Cell is updated with value " + sValue);
                }
            },
        ],

        sAddNewRowFormId: "formAddProject",
        sAddNewRowButtonId: "btnAddNew",
        sAddNewRowOkButtonId: "btnAddNewOk",
        sAddNewRowCancelButtonId: "btnAddNewCancel",
        sDeleteRowButtonId: "btnDelete",

        oAddNewRowOkButtonOptions: {
            label: "Confirm",
            icons: { primary: 'ui-icon-check' },
            name: "action",
            text: "Tạo",
            value: "add-new"
        },
        oAddNewRowCancelButtonOptions: {
            label: "Close",
            class: "back-class",
            name: "action",
            value: "cancel-add",
            icons: { primary: 'ui-icon-close' }
        },

        fnShowError: function (message, action) {
            switch (action) {
                case "update":
                    jAlert(message, "Update failed");
                    break;
                case "delete":
                    jAlert(message, "Delete failed");
                    break;
                case "add":
                    $("#lblAddError").html(message);
                    $("#lblAddError").show();
                    break;
            }
        },
        fnStartProcessingMode: function () {
            $("#projectNotify").dialog();
        },
        fnEndProcessingMode: function () {
            $("#projectNotify").dialog("close");
        }
    });

But my table doesn't show dropdownlist.
How can I do?
Thank you so much for helps

Cuong Pham

I've solved this problem. I cheked way 2 and I fixed it.
Thanks you for your sincerely.
Happy programming :)