我想在我的项目中引用“ datatable.net”中的表

时间:2019-07-30 19:27:21

标签: javascript jquery css asp.net asp.net-mvc

我想创建一个像(https://datatables.net/)的表,然后我在文件中调用了css和js文件。但是不知何故我无法显示表格。

链接显示在下面的代码中。


@{
    ViewBag.Title = "Emplpoyee list";
}

<h2>Employee CRUD Operations</h2>

<table id="employeeTable" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>

@section scripts{
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#employeeTable").DataTable({
                "ajax": {
                    "url": "/Employee/GetData",
                    "type": "GET",
                    "datatype":"json"
                },
                "columns": [
                    { "data": "Name" }
                     { "data": "Position" }
                      { "data": "Office" }
                      { "data": "Age" }
                       { "data": "Salary" }

                ]
            });
        });
    </script>

    }

1 个答案:

答案 0 :(得分:0)

可能是问题出在您的Ajax类型中。 试试:

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: 'data'
    },
    columns: [ ... ]
} );

相反:

       $(document).ready(function () {
        $("#employeeTable").DataTable({
            "ajax": {
                "url": "/Employee/GetData",
                "type": "GET",
                "datatype":"json"
            },
            "columns": [
                { "data": "Name" }
                 { "data": "Position" }
                  { "data": "Office" }
                  { "data": "Age" }
                   { "data": "Salary" }

            ]
        });
    });

或者:

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'state_date' },
        { data: 'office' },
        { data: 'extn' }
    ]
} );