Different input form for the same DataTable

shaadak@gmail.com

Can Editor Support different input views depending on the "editor" Extension"?

I have a Editor datatable that I will need to show or hide some fields depending what control is being called.

Thanks,
Shadi

shaadak@gmail.com

I got my answer to the my question myself - but I am posting here for others who may have the same question

Yes - it is possible to have different views to the same table

Define custom forms in your HTML that includes the fields that you would want to show, then use different global var Editor and Editor1.

In the button section when defining the Editor that you want to open as the form view

I hope this helps

<div id="customForm1">
    <editor-field name="Col1"></editor-field>
</div>

<div id="customForm2">
    <editor-field name="Col2"></editor-field>
    <editor-field name="Col3"></editor-field>
</div>


<table id="Report" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>

            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            </tr>
    </thead>
</table>


var   editor1 = new $.fn.dataTable.Editor({
                table: "#Report",
                template: '#customForm1',
                fields: [
                    {
                        label: "Co1:",
                        name: "Col1"

                    }
                ]
            });


    var    editor2 = new $.fn.dataTable.Editor({
                table: "#Report",
                template: '#customForm1',
                fields: [
                    {
                        label: "Co1:",
                        name: "Col1"

                    }
                ]
            });

  var table = $('#Report1').DataTable({
                data: mydata,
                dom: "Bfrtip",
                columns: [

                    {
                        data: 'Col1'
                     },

                    {
                    data: 'Col2' 
                    },
{

 data: 'Col3' 
}
                 

                ],

                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
 buttons: [
                    {
                        extend: "edit",
                        editor: editor1,
                        text: "show Input form 1"

                    },
                    {
                        extend: "edit",
                        editor: editor2,
                        text: "show Input form 2"
                    },
                   
                ]

           
            });
   

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

shaadak@gmail.com

Sorry for the multiple posts I was trying to make it more readable - but it didn't work - hope you still can follow

colin

Nice, thanks for posting back,

Colin