Multiple Pages before Create

cstrouthos

Hello,

I have a problem and i would like to ask for your help.
So i am trying to have a 2 step(pages) in my New button.
For example, when the user wants to create a new row, it clicks on the New button fills out the fields, then click next and then fills out again the fields in the second page, and finally click the Create button to insert the new row with data.

I have come across an old post which had this solution on it.

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "date"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Tfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );
 
    editor.on( 'initCreate initEdit', function () {
        firstPage( editor )
    } );
} );
 
function firstPage ( editor ) {
    editor.show( [ 'first_name', 'last_name', 'position' ] );
    editor.hide( [ 'office', 'extn', 'start_date', 'salary' ] );
 
    editor.buttons( {
        label: 'Next',
        fn: function () {
            secondPage( editor );
        }
    } );
}
 
function secondPage ( editor ) {
    editor.hide( [ 'first_name', 'last_name', 'position' ] );
    editor.show( [ 'office', 'extn', 'start_date', 'salary' ] );
 
    editor.buttons( [
        {
            label: 'Previous',
            fn: function () {
                firstPage( editor );
            }
        },
        {
            label: 'Save',
            fn: function () {
                editor.submit();
            }
        }
    ] );
}

I have tried it and i only manage to hide the fields i don't want to be displayed in the first page.
But i cant make the Next button to be displayed, instead the Create button is being displayed.

Thanks in Advance

allan

Hi,

Your code looks okay to me. Could you give me a link to the page so I can help to debug it please.

Thanks,
Allan