New user of editor needs help getting off the ground "DataTables warning"

New user of editor needs help getting off the ground "DataTables warning"

caharlandcaharland Posts: 1Questions: 1Answers: 0
edited June 2020 in Free community support

Hi,
I have a locally hosted VS Project and SQL server MVC Web App c# project to support my own holiday rental business (the IT is internal not commercial). I have added the Editor plugin via Nuget but can't get the inline editor going on a simple Index page. I am new to this plugin so please pardon a beginner's ignorance.

I have added the javascript from the staff table example on the Editor web site and think that I have amended it where appropriate although I don't know what to do with the ajax reference i.e.

   ajax: {url: '/api/staff',
                    type: 'POST'
                },

The error that I am stuck on is "DataTables warning: table id=ratestable - Ajax error. For more information about this error, please see http://datatables.net/tn/7". Although the data table itself is displaying perfectly.

My Index.cshtml file is as follows:

'''@model IEnumerable<Portugal.ExchangeRate>
@*<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>*@
@*<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>*@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
@*<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">*@
@*<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">*@
@*<link rel="stylesheet" type="text/css" href="../resources/demo.css">*@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
@*<script type="text/javascript" language="javascript" src="/Scripts/dataTables.editor.min.js"></script>*@
@*<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>*@

@{
    ViewBag.Title = "Index";
}

<br />
<p>
    @Html.ActionLink("Add exchange rate", "Create")
</p>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Rates</h1>
            </div>
            <div class="panel-body">
                <table id="ratestable" class="table table-striped table-bordered table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.RateYear)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.RateMonth)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Rate)
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RateYear)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RateMonth)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Rate)
                                </td>
                                <td>
                                    @Html.ActionLink(" ", "Edit", new { id = item.ID }, new { @class = "glyphicon glyphicon-edit" })
                                    @Html.ActionLink(" ", "Delete", new { id = item.ID }, new { @class = "glyphicon glyphicon-trash" })
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
}
@section Scripts
{

    <script type="text/javascript" language="javascript" class="init">
        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "/api/staff",
                table: "#ratestable",
                fields: [{
                    label: "Year:",
                    name: "RateYear"
                }, {
                    label: "Month:",
                    name: "RateMonth"
                }, {
                    label: "Rate:",
                    name: "Rate"
                }
                ]
            });

            var table = $('#ratestable').DataTable({
                dom: 'Bfrtip',
                ajax: {
                    url: '/api/staff',
                    type: 'POST'
                },
                serverSide: true,
                order: [[1, 'asc']],
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false,
                        searchable: false
                    },
                    { data: "RateYear" },
                    { data: "RateMonth" },
                    { data: "Rate", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
                ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });

    </script>

}

Hopefully. this gives you something to go on?

Many thanks, Craig

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

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    You should start debugging by following the link provided in the error message, where you will find diagnostic steps.

This discussion has been closed.