如何使用jQuery DataTables綁定表中的JSON數據

我想使用jQuery DataTables將數據綁定到表。如何使用jQuery DataTables綁定表中的JSON數據

我使用操作結果返回數據並將其轉換爲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" } 

       ] 

      });

的Controler部分，我們使用的是行動的結果

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

來源

2015-10-06 Adesh Gaonkar

幾個問題 - 你爲什麼要返回 'PartialView'？你爲什麼不返回一個json對象，而不是做所有的客戶端處理？使用'return Json（new {aaData =' – markpsmith

我沒有清楚地理解你的問題，但我想你的列名應該匹配，然後它會顯示data – Hiba

使用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" } 
    ] 
});

來源

2015-10-06 14:13:15

是的，它是對象的數組，但如果我們使用數據，它將無法正常工作，所以我使用aaData和mData及其工作正常 –

@AdeshGaonkar，您正在使用哪些DataTables版本？ –

我們使用版本1.10.4的DataTables –

我用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" } 

      ] 

     });

來源

2015-10-07 05:13:19

如何使用jQuery DataTables綁定表中的JSON數據

回答

相關問題