Row Details and Editor

Row Details and Editor

ciroracirora Posts: 29Questions: 2Answers: 1

Hi,
is it possible to use Row Details and Editor.
My goal is to obtain this -->http://datatables.net/examples/api/row_details.html and modify the extra info with the editor.
I can get it?

This question has an accepted answers - jump to answer

Answers

  • xain819xain819 Posts: 15Questions: 4Answers: 1

    yes u can just add the editor code there

  • ciroracirora Posts: 29Questions: 2Answers: 1

    Can you show me how can I do it?
    Thanks

  • xain819xain819 Posts: 15Questions: 4Answers: 1
    Answer ✓

    it whould look like this

    var editor;
        $(document).ready(function() {
    
         
            function format(d) {
                return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                        '<tr>' +
                        '<td>Reason:</td>' +
                        '<td>' + d.pcc_teacher_leave.reason + '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>DateFiled:</td>' +
                        '<td>' + d.pcc_teacher_leave.DateFiled + '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>Hr Date Verified:</td>' +
                        '<td>' + d.pcc_teacher_leave.Date + '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>Pay:</td>' +
                        '<td>' + d.pcc_teacher_leave.yesnoPay + '</td>' +
                        '</tr>' +
                        '</table>';
    
            }
    
            var editor = new $.fn.dataTable.Editor({
                ajax: "includes/php/leave.php",
                table: "#example",
                "fields": [{
                        "label": "empid:",
                        "name": "pcc_teacher_leave.empid",
                        "type": "hidden"
                    }, {
                        "label": "collegeID:",
                        "name": "pcc_teacher_leave.collegeid",
                        "type": "hidden"
                    }, {
                        "label": "reason:",
                        "name": "pcc_teacher_leave.reason",
                        "type": "hidden"
                    }, {
                        "label": "DatesofLeave:",
                        "name": "pcc_teacher_leave.DatesofLeave",
                        "type": "hidden"
                    }, {
                        "label": "reason:",
                        "name": "pcc_teacher_leave.reason",
                        "type": "hidden"
                    }, {
                        "label": "DateFiled:",
                        "name": "pcc_teacher_leave.DateFiled",
                        "type": "hidden"
                    }, {
                        "label": "Date:",
                        "name": "pcc_teacher_leave.Date",
                        "type": "hidden"
                    }, {
                        "label": "Pay:",
                        "name": "pcc_teacher_leave.yesnoPay",
                        "type": "hidden"
                    }
                ]
            });
            var table = $('#example').DataTable({
                dom: "T<'clear'>lfrtip",
                ajax: {
                    url: "includes/php/leave.php",
                    type: "POST"
                },
                columns: [
                    {
                        "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {"data": "pcc_employee.Name"},
                    {"data": "pcc_colleges.college"},
                    {"data": "pcc_teacher_leave.DatesofLeave"}
    
                ]
                tableTools: {
                    sRowSelect: "os",
                    aButtons: [
                       {sExtends: "editor_create", editor: editor},
                       {sExtends: "editor_remove", editor: editor}    
                    ]
                }
            });
            $('#example tbody').on('click', 'td.details-control', function() {
                var tr = $(this).parents('tr');
                var row = table.row(tr);
    
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
          
        });
    
  • ciroracirora Posts: 29Questions: 2Answers: 1

    Ok, thanks I'm going to study this code, I'll say if it works for me.
    Thanks

  • ciroracirora Posts: 29Questions: 2Answers: 1

    Ok, thanks, I understood the code, I tried it and it works for me.

  • kathys2151kathys2151 Posts: 5Questions: 2Answers: 0

    I've got the same issue, but when I use the code above and click on a detail row to try and edit it, I get an error on line 338 of editor.js - a type error, indicating something is undefined. My data is all correct, but the editor does not like something in the code above. Any ideas?

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

    @kathys2151 - Can you link to your page so we can debug it please?

    Allan

This discussion has been closed.