Generator table

elenastenina

Hello,
Trying to implement one generator table and could not figure out how to use it.
I uploaded html, all libraries, ajax code and it should be works but for some reasons still not. Please help here. Thank you!

allan

Could you clarify in what way it isn't working please? Are you seeing any error messages?

Allan

elenastenina

I was able to generate a table in browser but could not find extended buttons "New", "Edit" and "Delete" above of table.

I am using these libraries below for my Visual Studio:

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jqc-1.12.3/jqc-1.12.3/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3/datatables.min.css">
    <link href="~/Areas/Eforms/Content/DataTables/css/generator-base.css" rel="stylesheet" />
    <link href="~/Areas/Eforms/Content/DataTables/css/editor.bootstrap4.css" rel="stylesheet" />

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4/jqc-1.12.3/jqc-1.12.3/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3/datatables.min.js"></script>
    <script src="~/Areas/Eforms/Scripts/DataTables/dataTables.editor.min.js"></script>
    <script src="~/Areas/Eforms/Scripts/DataTables/editor.bootstrap4.min.js"></script>
    <script src="~/Areas/Eforms/Scripts/DataTables/table.Travel.js"></script>

And table code below:

<div class="container">

                <h1 style="font-size:20px">
                    Travel Expense
                </h1>

                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="Travel" style ="width:100%">
                    <thead>
                        <tr style="background-color: #018751">
                            <th>Date</th>
                            <th>Type of Expense</th>
                            <th>Decription</th>
                            <th>CostCenter</th>
                            <th>Account Number</th>
                            <th>W/O</th>
                            <th>Project</th>
                            <th>Amount</th>
                            <th>Attachment</th>
                        </tr>
                    </thead>
                </table>

            </div>

Where jQuery code should be go

(function($){
           $(document).ready(function () {
       var editor = new $.fn.dataTable.Editor( {
        ajax: 'api/Travel',
        table: '#Travel',)?

Thank you very much for your help.

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

allan

The Javascript should contains some code that looks like this:

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );

    table.buttons().container()
        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

If I create a table in Generator and click the "Run now" button it appears to work as expected when Bootstrap is selected.

Can you link to the page so I can see the issue, or give me step by step instructions for how to replicate the issue with Generator's Run now button?

Allan

elenastenina

Thank you, Allan.
Unfortunately, I cannot provide a link to you. There are a code in chtml:

(function($){
$(document).ready(function () {

   var editor = new $.fn.dataTable.Editor( {
    ajax: 'api/Travel',
    table: '#Travel',

    fields: [
        {
            "label": "Date:",
            "name": "date",
            "type": "datetime",
            "format": "ddd, D MMM YY"
        },

        {
            "label": "Type of Expense:",
            "name": "type_of_expense",
            "type": "select",
            "options": [
                "Miles",
                " Gas",
                " Taxi",
                ""
                ]
        },

        {
            "label": "Decription:",
            "name": "decription",
            "type": "textarea"
        },
        {
            "label": "CostCenter:",
            "name": "costcenter",
            "type": "select",
            "options": [
                "700",
                " 625",
                " 550",
                " 890"
            ]
        },
        {
            "label": "Account Number:",
            "name": "account_number",
            "type": "select",
            "def": "Select Account Number",
            "options": [
                "456.90 General Expense",
                " 4567.90 Travel Expense"
            ]
        },
        {
            "label": "W\/O:",
            "name": "wo"
        },
        {
            "label": "Project:",
            "name": "project"
        },
        {
            "label": "Amount:",
            "name": "amount"
        }
    ]
} );

   var table = $('#Travel').DataTable( {
       ajax: 'api/Travel',
       columns: [
           {
               "data": "date"
           },

           {
               "data": "type_of_expense"
           },
           {
               "data": "decription"
           },
           {
               "data": "costcenter"
           },
           {
               "data": "account_number"
           },
           {
               "data": "wo"
           },
           {
               "data": "project"
           },
           {
               "data": "amount"
           }
       ],
       select: true,
       lengthChange: false

   });


new $.fn.dataTable.Buttons( table, [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
] );

table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

} );
}(jQuery));

ajax: 'api/Travel', - do I have to use my url here?

Plus table in html above but still doesn't work properly, I am not sure what is wrong.
Can I make a screen shot and attached to you?

allan

Are you looking all of the Javascript files that the HTML provided by Generator gives?

Allan

elenastenina

I already figured out, Allan. Thank you!