Management of data from multiple database tables in datatables editor

rharber

Hi,

I am facing some problems with datatables. First I want to know if what I want is possibile or not. If it is I would like some help on how to go about it. I have a page where certain details are listed. There are New, Edit and Delete buttons. I give the code here for the javascript here.

(function() {

var editor = new $.fn.dataTable.Editor({
    // where the ajax endpoints are for the buttons
    ajax: {
        create: {
            type: 'POST',
            url:  '/api/commute_options'
        },
        edit: {
            type: 'PUT',
            url:  '/api/commute_options/_id_'
        },
        remove: {
            type: 'DELETE',
            url:  '/api/commute_options/_id_'
        }
    },
    idSrc : "id",
    table : "#commutegrid",
    // fields is an array that lists the mapping for when the create button is pressed
    fields: [ {
        label : "Commute Option name",
        name: "name"
    },
    {
        label:"Commute Type:",
        name: "commute_type_id",
        type: "select",
        ipOpts: commuteTypeList
    },
    {
        label:"Vehicle Type:",
        name: "vehicle_type_id",
        type: "select",
        visible : false
    },
    {
        label:"Shared With:",
        name: "shared_with",
        visible : false
    },
    {
        label:"Emission Factor:",
        name: "emission_type_id",
        type: "select",
        visible : false
    },

    {
        label : "Distance",
        name: "Distance"
    },
    ]
});
$(document).ready(function() {

    $('#commutegrid').DataTable( {
        serverSide: true,
        dom: "Bfrtip",
        // location of the endpoint for the index list
        ajax: "/api/commute_options",
        // list the columns that we expect back in the JSON - this must match what comes from the backend
        columns: [
            { data: "name" },
            { data: "entry_count"},
            { data: "created_at" },
            { data: "updated_at" }
        ],
        select: true,
        // make sure that the name of the variable you assign matches the variable you declared above
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );

});

})();

Html Code

<table id="commutegrid" class="display" cellspacing="0" width="100%">
<thead>
<tr>
    <th>Name</th>
    <th>Number of Entries</th>
    <th>Created At</th>
    <th>Last Updated</th>
</tr>
</thead>
<tfoot>
<tr>
    <th>Name</th>
    <th>Number of Entries</th>
    <th>Created At</th>
    <th>Last Updated</th>
</tr>
</tfoot>
</table>


<script src="/assets/js/pages/commute_options.js"></script>

When the New button is pressed the following details should be expected in the popup that comes up.

1. Commute Option name,
2. Commute Type (drop down)
3. Vehicle Type (drop down)
4. Shared With
5. Emission Factor: (drop down)
6. Distance

I have the code ready this far.

First thing I need to do is to add a button to the popup which comes up when I click on the 'New' link. This button should be called 'Create Commute Details" and should be present adjacent to the "create" button in the popup. FYI the "Commute Option Name" field is from a table in the database called commute_options. The rest of the fields are from a table called commute_details. Following are the things that I need.

On filling all the details and on pressing the 'Create Commute Details" in the popup all field values except commute option should be stored in disabled textboxes in a row just below the commute option name and it should become visible. There should be no server side operation. Just the values should be displayed in the popup. There should be a check box to the rightmost corner of this row. The details from 2 to 5 should again be visible below this row for adding one more commute details. After adding a number of commute details I should be able to click on the create button for the actual server side operation . I am not worried about the server side operations. What mainly concerns me is how to put fields in a row in disabled textboxes after clicking the 'Create Commute Details' button. And how to add the button itself button to the left of the 'create' button in the popup. I can manage the javascript itself. But I need help with the above two points.