How to bind data table through html using jQuery?

@{
    Layout = null;
}
<H1>Employee Details</H1>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">

<div class="container">
    <table id="tblGrid" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Salary</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            url: 'http://localhost:50148/api/EmpAPI/EmployeeDetails',
            type: "GET",
            dataType: "json",
            success: function (result) {
                debugger;
             
                var htmlContent = "";
                $.each(result, function (key, item) {
                    var itemDetails = [
                                 { "ItemName": item.ID }
                    ];
                    htmlContent = htmlContent + "<tr><td>" + item.ID + "</td>" + "<td>" + item.Name + "</td>" + "<td>" + item.Salary + "</td>" + "<td>" +
                    '<a href="http://localhost:50148/api/EmpAPI/EmployeeDetails?ID=' + item.ID + '">Edit</a>' + ' ' +
                    '<a href="http://localhost:50148/api/EmpAPI/DeleteEmployee?ID=' + item.ID + '">Delete</a>' + "</td></tr>";
                });
                $("#tblGrid").append(htmlContent);

                $('#tblGrid').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
                    //"paging": false,
                    //"ordering": false,
                    //"info": false,
                    //"searching": false
                });

            },
            error: function (err) {
                alert(err.statusText);
            }
        });
    });
</script>

Share:

Read More