DataTable functionality not working

Question

User1979860870 posted

Hi

https://imgur.com/5fQuARG

$(document).ready(function () {
    //$('[data-toggle="tooltip"]').tooltip();
    loadData();
    $('#tblLocation').DataTable({
        "searching": true,
        "ordering": true,
        "pagingType": "full_numbers",
    });
});

****************************************
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="~/components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="~/components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="~/components/Ionicons/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="~/components/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="~/dist/css/skins/_all-skins.min.css">

<section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        @RenderBody()
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </section>


    <!-- Bootstrap 3.3.7 -->
    <script src="~/components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="~/components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

    <!-- AdminLTE App -->
    <script src="~/dist/js/adminlte.min.js"></script>

function loadData() {
    $.ajax({
        url: "/Location/List",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.Id + '</td>';
                html += '<td>' + item.Description + '</td>';
                html += '<td><a href="#" class="view" title="View" onclick="Delete(\'' + item.Id + '\')"><i class="material-icons">&#xE417;</i></a> <a href="#" class="edit" title="Edit" onclick="return getbyID(\'' + item.Id + '\')"><i class="material-icons">&#xE254;</i></a> <a href="#" class="delete" title="Delete" onclick="Delete(\'' + item.Id + '\')"><i class="material-icons">&#xE872;</i></a></td>';


                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(item.Id);
            alert(errormessage.responseText);
        }
    });
}

Thanks

Answer 1

User475983607 posted

You are in the wrong forum.  See the support docs for the response framework you are using; Material???.  I assume you are missing file references to the font file(s). 

Answer 2

User1686398519 posted

Hi jagjit saini, 

This doesn't seem to be an error caused by Datables, but because you haven't set the icon font yet.

<i class="material-icons">&#xE417;</i>
<i class="material-icons">&#xE254;</i>
<i class="material-icons">&#xE872;</i>

Based on your code, it looks like you are using Material Icons.

1. The easiest way to set up icon fonts for use in any web page is through Google Web Fonts.
2. All you need to do is include a single line of HTML:

   • <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">

Here is the result. 

Best Regards,

YihuiSun