数据表 - 无效的 Json 响应

Question

我正在尝试制作一个动态的主从数据表，并且在创建主表时陷入困境，更不用说细节了！

我正在使用 C# Web 服务来获取数据并不断收到“无效的 JSON 响应”错误。 我使用了 Chrome 开发者工具，获取数据没有错误。

Web 服务 API 以 JSON 字符串形式返回数据：

"[{\"Name\":\"County Tax\",\"ExpenseTypeID\":37},{\"Name\":\"Education\",\"ExpenseTypeID\":36},{\"Name\":\"Medical\",\"ExpenseTypeID\":35}]"

当我在 Chrome 中检查 XHR Response 时，它​​显示：

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{"Name":"County Tax","ExpenseTypeID":37},{"Name":"Education","ExpenseTypeID":36},{"Name":"Medical","ExpenseTypeID":35}]</string>

我使用 JSONLint 来验证 JSON 并进行验证（减去 <string ...>...</string>）。

这是代码的设置方式：

<table id="typesDataTable" class="table table-responsive table-striped table-bordered table-hover" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Expense Type</th>
            <th style="display: none">ExpenseTypeID</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>             

Javascript：

var typesDataTable = new Object;

$(document).ready(function () {
    buildTypesDataTable();
    addTypesDataTableListener();
} );

function buildTypesDataTable() {debugger
    if ($.isEmptyObject(typesDataTable)) {
        typesDataTable = $("#typesDataTable").DataTable({
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            pageLength: 10,
            dom: "tip",
            serverSide: true,
            pagingType: "simple",
            autowidth: false,
            language: {
                emptyTable: "No Expense Types were found."
            },
            ajax: {
                url: "../services/exp.asmx/GetAllExpenseTypes",
                type: "POST"
            },
            columns: [
                {
                    className: 'details-control',
                    orderable: false,
                    data: null,
                    width: "5%",
                    defaultContent: '<img class="details-control-mouseover" src="../assets/images/details_transparent_background.png" title="Click to see included parts." alt="Click to see included parts."/>'
                },
                { data: "Name", width: "85%" },
                { data: "ExpenseTypeID", "visible": false, "searchable": false }
            ],
            order: [[1, "asc"]]
        });
    }
}

function addTypesDataTableListener() {
    // Add event listener for opening and closing details
    $('#typesDataTable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = typesDataTable.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Add the html table shell of the datatable.
            row.child(formatTypesDataTableDetailRow(iTableCounter)).show();

            //show the datatable row.
            tr.addClass('shown');

            // try datatable stuff
            buildSubTypesDataTable(row.data(), iTableCounter);
            iTableCounter = iTableCounter + 1;
        }
    });
}

更新 - 修复

$(document).ready(function () {
    var url = "../services/exp.asmx/GetAllExpenseTypes";
    var params = '';
    populteTypesTable(url, params);
    //buildTypesDataTable();
    addTypesDataTableListener();
} );


var tblExpType = $("#typesDataTable").DataTable({
    jQueryUI: true,
    data: [],
    dom: 'lfrtip',
    stateSave: true,
    stateDuration: 60 * 10,
    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
    order: [ [1, "asc"]],
    autoWidth: false,
    pagingType: "full_numbers",
    "oLanguage": {
        "sEmptyTable": "No Expense Types were found."
    },
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        }, {
            "data": "Name"
        }, {
            "data": "ExpenseTypeID"
        }
    ],
    "columnDefs": [
        {
            "targets": [2],
            "visible": false,
            "searchable": false
        },
        {
            "width": "5%",
            "targets": [0]
        },
        {
            "width": "85%",
            "targets": [1]
        }
    ],
    "pageLength": -1,
    processing: true,
    deferRender: true
});

function populteTypesTable(ws_url, parameters) {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: ws_url,
        cache: false,
        data: parameters,
    }).done(function (result) {debugger
        tblExpType.clear().draw();
        if (!result || result.d === "") {
            $('#divType').hide();
        }
        else {
            jResult = JSON.parse(result.d); // This is what I needed to get the correct JSON string
            tblExpType.rows.add(jResult).draw();
            tblExpType.columns([2]).visible(false);
            var currPage = parseInt($('#hfCurrPage').val());
            tblExpType.page(currPage).draw(false);
        }
    }).fail(function (jqXHR, textStatus, errorThrown) {debugger
        alert(textStatus + ' - ' + errorThrown + '\n' + jqXHR.responseText);
    });
}

Answer 1

您可以从 API 获取 json 数据，然后像我在下面所做的那样将其转换，然后将其设置为 DataTable 的源。 检查下面的示例。

 var data = [{"Name":"County Tax","ExpenseTypeID":37},{"Name":"Education","ExpenseTypeID":36},{"Name":"Medical","ExpenseTypeID":35}]; var typesDataTable = new Object; let dataSet = []; data.forEach(el =>{ let subArr = []; for( let[key,val] of Object.entries(el)){ subArr.push(val); } dataSet.push(subArr); }); //console.log(arr); $('#example').DataTable( { data: dataSet, columns: [ { title: "Name" }, { title: "ExpenseTypeID" } ] } );

 <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <table id="example" class="display" width="100%"></table>