Question

我想使用jQuery DataTables将数据绑定到表。

我使用操作结果返回数据并在视图中将其转换为JSON，数据未显示在表格中，只显示空白列。

以下是视图部分

  @model Guardian.Core.Model.Models.PatientMedicationsCollection
    @{
        var ModelJsonData = Newtonsoft.Json.JsonConvert.SerializeObject(Model);
        Layout = null;
    }

    <script type="text/javascript">

        var MedicationMasterData = JSON.parse(@Html.Raw(Json.Encode(ModelJsonData)));
        var CCDAChecked;
        var LatestCCDA;
        var AllCCDA;
        var CLaimsChecked;
        var AllClaims;
        var Last6Month;
        var OneYear;
        var FilteredData = [];

        $(document).ready(function () {
            debugger;

            $.each(MedicationMasterData, function (idx, obj) {
                FilteredData.push(this);

            });
            FilterTable(MedicationMasterData);
});
        function FilterTable(FilteredData) {
            debugger;
            FData = JSON.stringify(FilteredData)
            $('#PatientMedications').DataTable({
                "scrollX": 100,
                "paging": true,
                "pagingType": "full_numbers",
                "dom": '<"toolbar">frtip',
                "aaData": FData,

                columns: [
                    { title: "PatientID" },
                    { title: "FirstName" },
                    { title: "LastName" },
                    { title: "DOB." },
                    { title: "Gender" },
                    { title: "Source" },
                    { title: "SourceCreatedDate" },
                    { title: "SourceKeyID" },
                    { title: "LatestCCDA" },
                    { title: "Code" },
                    { title: "CodeType" },
                    { title: "DrugName" },
                    { title: "DrugDecriptionsM" },
                    { title: "StartDate" },
                    { title: "StopDate" },
                    { title: "Instructions" },
                    { title: "Status" },
                    { title: "DoseQuantity" },
                    { title: "RateQuantity" },
                    { title: "RateQuantityUnit" },
                    { title: "DrugDecriptionsM" },
                    { title: "ClaimLineFromDate" },
                    { title: "DaysSupply" },
                    { title: "DOSAGEFORMNAME" },
                    { title: "ROUTENAME" },
                    { title: "ST" }

                ]

            });

我们使用操作结果返回数据的控制器部件

public ActionResult PatientMedications(int patientID)
            {
                return PartialView(patientrepository.PatientMedications(patientID));
            }

Answer 1

使用columns.data选项代替columns.title从行的数据对象中定义列的数据源。
不要将JSON字符串传递给aaData，而是期望数组。删除JSON.stringify()。
使用data选项名称而不是已停用的aaData。我假设FilteredData是一个对象数组。

$('#PatientMedications').DataTable({
    "scrollX": 100,
    "pagingType": "full_numbers",
    "dom": '<"toolbar">frtip',
    "data": FilteredData,
    "columns": [
        { data: "PatientID" },
        { data: "FirstName" },
        { data: "LastName" },
        { data: "DOB." },
        { data: "Gender" },
        { data: "Source" },
        { data: "SourceCreatedDate" },
        { data: "SourceKeyID" },
        { data: "LatestCCDA" },
        { data: "Code" },
        { data: "CodeType" },
        { data: "DrugName" },
        { data: "DrugDecriptionsM" },
        { data: "StartDate" },
        { data: "StopDate" },
        { data: "Instructions" },
        { data: "Status" },
        { data: "DoseQuantity" },
        { data: "RateQuantity" },
        { data: "RateQuantityUnit" },
        { data: "DrugDecriptionsM" },
        { data: "ClaimLineFromDate" },
        { data: "DaysSupply" },
        { data: "DOSAGEFORMNAME" },
        { data: "ROUTENAME" },
        { data: "ST" }
    ]
});

Answer 2

我使用了aaData和mData，并且工作正常

 function FilterTable(FilteredData) {

        $('#PatientMedications').DataTable({
            "bDestroy": true,
            "bRetrieve": true,
            "scrollX": 100,
            "paging": true,
            "pagingType": "full_numbers",
            "dom": '<"toolbar">frtip',
            "aaData": FilteredData,

            "aoColumns": [
                { "mData": "PatientID" },
                { "mData": "FirstName" },
                { "mData": "LastName" },
                { "mData": "DateOfBirth" },
                { "mData": "Gender" },
                { "mData": "Source" },
                { "mData": "SourceCreatedDate" },
                { "mData": "SourceKeyID" },
                { "mData": "LatestCCDA" },
                { "mData": "Code" },
                { "mData": "CodeType" },
                { "mData": "DrugName" },
                { "mData": "Drug Descriptions" },
                { "mData": "StartDate" },
                { "mData": "StopDate" },
                { "mData": "Instructions" },
                { "mData": "Status" },
                { "mData": "DoseQuantity" },
                { "mData": "RateQuantity" },
                { "mData": "RateQuantityUnit" },
                { "mData": "ClaimLineFromDate" },
                { "mData": "QuantityDispensed" },
                { "mData": "DaysSupply" },
                { "mData": "DosageFormName" },
                { "mData": "ROUTENAME" },
                { "mData": "ST" }

            ]

        });

Answer 3

$('#PatientMedications').dataTable({
  "aaData": data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
  "aoColumns": [{
    "mDataProp": "PatientID"
  }, {
    "mDataProp": "FirstName"
  }]
});

如何使用jQuery DataTables在表中绑定JSON数据

3 个答案: