angularjs datatables with inline editor is not working properly

jeevi

Hello,

I am using DataTables with AngularJS. I tryed to use function inline and bubble, but it does not works.

Follows my code for better understanding:

AngularJS:

[code]

masterDataService.getUserList().then(function (response) {
if (response.status_code === 200) {

            $scope.usersList = response.users;

            var list = $scope.usersList;
            var items = [];
            $.each(list, function (key, value) {
                items[key] = [value.id, value.username, value.email, value.first_name + ' ' + value.last_name,
                    value.mobile, value.mobile_verify, value.created_at];
                if (items[key][5] === "NO") {
                    items[key][5] = '<i class="fa fa-check text-success"></i>';
                } else {
                    items[key][5] = '<i class="fa fa-remove text-danger"></i>'
                }
            });


            var myTable;


            // Set up the editor
            myTable = new $.fn.dataTable.Editor( {
                table: "#example",
                idSrc:  'id',
                fields: [
                    {
                        title: "Id",
                        name: "Id",
                        label:'Id'
                    }, {
                        title: "UserName",
                        name:"UserName",
                        label:"UserName"
                    }, {
                        title: "Email",
                        name: "Email",
                        label: "Email"
                    }, {
                        title: "FullNmae",
                        name: "FullNmae",
                        label: "FullNmae",
                    }, {
                        title: "Mobile",
                        name: "Mobile",
                        label: "Mobile",

                    }, {
                        title: "Mobile Verify",
                        name: "MobileVerify",
                        label: "Mobile Verify"

                    }, {
                        title: "Created Date",
                        name: "CreatedDate",
                        label: "Created Date",
                    }

                ]
            } );




            var dataSet = items;
            var columnDefs = [{
                title: "Id"
            }, {
                title: "UserName"
            }, {
                title: "Email"
            }, {
                title: "FullNmae"
            }, {
                title: "Mobile"
            }, {
                title: "Mobile Verify"
            }, {
                title: "Created Date"
            }];







            // var myTable;

            myTable = $('#example').DataTable({
                data: dataSet,
                columns: columnDefs,
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        text: '<i class="fa fa-files-o"></i> copy',
                        titleAttr: 'Copy'
                    },
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fa fa-file-excel-o"></i> excel',
                        titleAttr: 'Excel'
                    },

                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        titleAttr: 'PDF'
                    },
                    { extend: "create", editor: myTable },
                    { extend: "edit",   editor: myTable },
                    { extend: "remove", editor: myTable },


                ],
                // select: true,
                responsive: true,
                altEditor: true, // Enable altEditor
                select: {
                    style:    'os',
                    selector: 'td:first-child'
                },

            });

            $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
                myTable.bubble( this, {
                    buttons: { label: '&gt;', fn: function () { this.submit(); } }
                } );
            } );


        } else {

        }
    }, function (error) {
        alertService.showSimpleToast(error.message);

    });

kthorngren

Are you getting errors in your browser's console?

Maybe this error?

Unable to automatically determine field from source. Please specify the field name

You have this:

        myTable = new $.fn.dataTable.Editor( {
            table: "#example",
            idSrc:  'id',

It looks like you are using array based data since you don't have columns.data defined. According to the idSrc docs the idSrc should be an integer for array based data.

Just a guess without knowing about any error messages or a description of what happens when trying to inline edit.

Also, I don't believe this is a valid Datatables option:
altEditor: true, // Enable altEditor

Kevin

jeevi

No, I'm getting this error in console
Uncaught TypeError: myTable.bubble is not a function

kthorngren

Uncaught TypeError: myTable.bubble is not a function

That helps. I think the problem is you are assigning the Editor instance to myTable then you are assigning Datatables to myTable. At this point myTable no longer contains the Editor instance. You will want to assign Datatables to a different variable.

Kevin

jeevi

yes thanks, kevin,
that's the issue but now i'm getting this error..

Uncaught Unable to find row identifier For more information

can you help for this ..

thanks,

kthorngren

Uncaught Unable to find row identifier For more information

That is the error I was referring to above (had the wrong message). Please read the link in the error and checkout the steps I mentioned above.

Kevin

jeevi

hi kevin ,
i got the issue. now its fixed. thank very much for your great support.