文章/答案/技术大牛

发布

问为什么表体没有数据？
EN

Stack Overflow用户

提问于 2021-01-11 19:35:00

回答 3查看 183关注 0票数 0

我一直在尝试在jQuery数据表上显示数据，但没有成功。我可以从.Net核心控制器获取数据，在我的视图中，我可以在调试输出时看到数据，但在表体部分没有输出。为了成功显示数据库中的数据，我缺少什么。

<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table dataTable no-footer" data-hs-datatables-options="{
 &quot;columnDefs&quot;: [{
    &quot;targets&quot;: [0, 7],
    &quot;orderable&quot;: false
  }],
 &quot;order&quot;: [],
 &quot;info&quot;: {
   &quot;totalQty&quot;: &quot;#datatableWithPaginationInfoTotalQty&quot;
 },
 &quot;search&quot;: &quot;#datatableSearch&quot;,
 &quot;entries&quot;: &quot;#datatableEntries&quot;,
 &quot;pageLength&quot;: 15,
 &quot;isResponsive&quot;: false,
 &quot;isShowPaging&quot;: false,
 &quot;pagination&quot;: &quot;datatablePagination&quot;}" role="grid" aria-describedby="datatable_info">
    <thead class="thead-light">
        <tr role="row">
            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                <div class="custom-control custom-checkbox">
                    <input id="datatableCheckAll" type="checkbox" class="custom-control-input">
                    <label class="custom-control-label" for="datatableCheckAll"></label>
                </div>
            </th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">BranchID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 177px;">DepartmentID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 146px;">EmailAddress</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 114px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"> 
</script>
<script>
$(function () {
    
    $.ajax({
    type: "POST",
    url: "/ApplicationUsers/LoadData",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});
});


// INITIALIZATION OF DATATABLES
// =======================================================
function OnSuccess(response) {
    $.noConflict();
    $('#datatable').DataTable(
        {
            dom: 'Bfrtip',
            bLengthChange: true,
            lengthMenu: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true,
            searching: false,
            data: response,
            columns: [
                { 'data': 'UserID' },
                { 'data': 'UserName' },
                { 'data': 'BranchID' },
                { 'data': 'DepartmentID' },
                { 'data': 'EmailAddress' }]
        });
};





 </script>

jquery

asp.net-core

datatables

回答 3

Stack Overflow用户

发布于 2021-01-12 09:12:43

DataTables中"columns“中的JSON数据映射看起来与数据的顺序不同，数据键名以小写开头。请看下面的内容。

确保您的JQuery库在DataTables库之前，并且只有一个版本的JQuery库

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> 
</script>

$(document).ready(function () { 
     $('#datatable').DataTable({
        ajax: {
        url: '/ApplicationUsers/LoadData',
        "dataSrc": ""
        },
        columns: [
            { data: "userID" },
            { data: "userName" },
            { data: "departmentID" },
            { data: "branchID" },
            { data: "emailAddress" }
        ]
     });
});

票数 1

Stack Overflow用户

发布于 2021-01-11 20:55:08

您的成功回调看起来缺少正确的函数调用

$.ajax({
 type: "POST",
 url: "/ApplicationUsers/LoadData",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(response) {  //maybe try to call like this?
  OnSuccess(response);
 }
 failure: function (response) {
    alert(response.d);
 },
 error: function (response) {
    alert(response.d);
 }
 });
 });

票数 0

Stack Overflow用户

发布于 2021-01-12 15:14:40

您需要将列值更改为camelCase：

列：{ 'data'：'userID‘}，{ 'data'：'userName’}，{ 'data'：'branchID‘}，{ 'data'：'departmentID’}，{ 'data'：'emailAddress‘} });

如果你有错误‘

TypeError：$(...).DataTable is not a function’，你可以参考this SO question。并签入devtools网络，打开devtools并进入页面，您可以看到如下结果：

下面是一个有效的演示：

控制器：

public IActionResult LoadData()
        {
            List<Data> l = new List<Data> { new Data { UserID = 1, UserName = "u1", BranchID = 11, DepartmentID = 111, EmailAddress = "e1" }, new Data { UserID = 2, UserName = "u2", BranchID = 22, DepartmentID = 222, EmailAddress = "e2" } };
            return Json(l);
        }

Data.cs：

public class Data {
    public int UserID { get; set; }
    public string UserName { get; set; }
    public int BranchID { get; set; }
    public int DepartmentID { get; set; }

    public string EmailAddress { get; set; }


    }

查看：

<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table dataTable no-footer" data-hs-datatables-options="{
                 &quot;columnDefs&quot;: [{
                    &quot;targets&quot;: [0, 7],
                    &quot;orderable&quot;: false
                  }],
                 &quot;order&quot;: [],
                 &quot;info&quot;: {
                   &quot;totalQty&quot;: &quot;#datatableWithPaginationInfoTotalQty&quot;
                 },
                 &quot;search&quot;: &quot;#datatableSearch&quot;,
                 &quot;entries&quot;: &quot;#datatableEntries&quot;,
                 &quot;pageLength&quot;: 15,
                 &quot;isResponsive&quot;: false,
                 &quot;isShowPaging&quot;: false,
                 &quot;pagination&quot;: &quot;datatablePagination&quot;}" role="grid" aria-describedby="datatable_info">
    <thead class="thead-light">
        <tr role="row">
            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                <div class="custom-control custom-checkbox">
                    <input id="datatableCheckAll" type="checkbox" class="custom-control-input">
                    <label class="custom-control-label" for="datatableCheckAll"></label>
                </div>
            </th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">BranchID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 177px;">DepartmentID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 146px;">EmailAddress</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 114px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
@section scripts{
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script>
        $(function () {

            $.ajax({
                type: "POST",
                url: "/ApplicationUsers/LoadData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });


        // INITIALIZATION OF DATATABLES
        // =======================================================
        function OnSuccess(response) {
            //$.noConflict();
            $('#datatable').DataTable(
                {
                    dom: 'Bfrtip',
                    bLengthChange: true,
                    lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true,
                    searching: false,
                    data: response,
                    columns: [
                        { 'data': 'userID' },
                        { 'data': 'userName' },
                        { 'data': 'branchID' },
                        { 'data': 'departmentID' },
                        { 'data': 'emailAddress' }]
                });
        };

    </script>
}

结果：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65666127

复制

相似问题

问为什么表体没有数据？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么表体没有数据？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么表体没有数据？
EN