jquery datatable with mvc project not working

Question

i am trying to generate table using Jquery.Datatable , the table generated but without rendering the data , When the developer tools are opened the regular error appear although the jquery & datatable references added to the page in order , so any help here

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/jquery.dataTables.js"></script>


 <table id="datatableId" data-url="@Url.Action("Index","Home")" cellspacing="0" width="100%" class="table table-responsive table-bordered table-striped">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Data</th>
                    <th>Actions</th>
                </tr>

            </thead>
            <tbody></tbody>
        </table>


<script>
    var datatable = {
        table: null,
        initializedDataTable: function () {
            var $tablea = $(".table-striped");
            datatable.table = $tablea.DataTable({
                processing: true,
                serverSide: true,
                "alengthMenu": [[10, 20, 30, 40, 50], [10, 20, 30, 40, 50]],
                ajax: {
                    url: $tablea.prop("data-url"),
                    type: "POST"
                },
                "columns": [{ "data": "FirstName" },
                { "data": "LasttName" },
                { "data": "Gender" }],

                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var inner = '<div class="btn-group">' +
                                '<button type="button" class="btn btn-secondary dropdwon-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                                'Actions' +
                                '</button>' +
                                '<div class="dropdown-menu">' +
                                '<a href="#"  class="drop-down-item btn btn-default edit" data-id="' + row.id + '" >Edit</a>' +
                                '<a href="#"  class="drop-down-item btn btn-default delete" data-id="' + row.id + '" >delete</a>' +
                                '</div>' +
                                '</div>';

                            return inner;
                        },
                        "targets": -1

                    }
                ],
                "pagingType": "full_numbers"

            });
            datatable.table.on('draw', function () {
                $('button[data-type="delete"]').click(function () {
                    var $button = $(this);

                });
                $('button[data-type="Edit"').click(function () {

                });
            });


        },
        getData: function () {
            if (datatable.table == null) {
                datatable.initializedDataTable();

            } else {
                datatable.table.ajax.reload();
            }
        }

    }

    $(document).ready(function () {
        datatable.getData();
    });
</script>

sure , thank you for reply , Uncaught TypeError: $tablea.DataTable is not a function at Object.initializedDataTable (Index:78) at Object.getData (Index:126) at HTMLDocument.<anonymous> (Index:136) at fire (jquery-1.10.2.js:3062) at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174) at Function.ready (jquery-1.10.2.js:447) at HTMLDocument.completed (jquery-1.10.2.js:118) — moath naji
– moath naji, Commented Jul 13, 2017 at 7:20
check in your console that you are not getting 404 error for DataTable js or try to click on datatable script to open it in new tab. It seems that there is some issue in file reference. — Ankush Jain
– Ankush Jain, Commented Jul 13, 2017 at 7:25
yes there are no 404 and when i clicked on the file it opened also the network section with no errors — moath naji
– moath naji, Commented Jul 13, 2017 at 7:33
use this cdn link instead of local cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js — Ankush Jain
– Ankush Jain, Commented Jul 13, 2017 at 7:34

Ankush Jain · Accepted Answer · 2017-07-13 07:41:19Z

3

It seems that path of your file should be

<script src="~/Scripts/jquery.dataTables.js"></script>

instead of

<script src="~/Content/jquery.dataTables.js"></script>

Also try to replace your local reference with below code

<script src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" />

Because the version of jQuery you are using is very old.

edited Jul 13, 2017 at 7:41

answered Jul 13, 2017 at 7:27

Ankush Jain

7,2434 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery datatable with mvc project not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related