Question

我有像这样的数据json

[{
    "Lembar_BPJS_Kesehatan": "2",
    "Total_BPJS_Kesehatan": "56000",
    "Lembar_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT": "5",
    "Total_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT": "398300",
    "Lembar_PDAM_TIRTA_UMBU_KAB__NIAS": "1",
    "Total_PDAM_TIRTA_UMBU_KAB__NIAS": "23089",
    "Lembar_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR": "319",
    "Total_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR": "20434870",
    "Lembar_PLN_Postpaid": "103",
    "Total_PLN_Postpaid": "10272775",
    "Lembar_Pulsa_Listrik": "30",
    "Total_Pulsa_Listrik": "1905000",
    "Lembar_Telkom": "4",
    "Total_Telkom": "1716000",
    "tgl_dari": "2018-04-20",
    "tgl_sampai": "2018-04-20"
}]

我想用我的代码在datatables上显示，这个：

  $(document).ready(function(){
                var dataku = [];
                $.ajax({
                    url: base_url+'laporan/load_trx_per_tgl_bukopin',
                    dataType: 'json', 
                    success: function(data){
                        dataku = jQuery.parseJSON(JSON.stringify(data));;
                        console.log(dataku);                            
                }
                });

                $('#tabelTransaksiPerTglBukopin').DataTable( {
                    'dom': 'Zlfrtip',
                    'scrollX': true,
                    'data': dataku
                });
            });

但是，无法在我的数据表中显示。我的观点是这样的：

test

Answer 1

试试吧

$(document).ready(function(){
  var dataku = [];
  $.ajax({
    url: base_url+'laporan/load_trx_per_tgl_bukopin',
    dataType: 'json', 
    success: function(data){
      dataku = jQuery.parseJSON(JSON.stringify(data));;
      console.log(dataku);
      $('#tabelTransaksiPerTglBukopin').DataTable( {
        'dom': 'Zlfrtip',
        'scrollX': true,
        'data': dataku
      });  
      }
    });      
 });

ajax代表异步javascript和xml。这意味着您获取的数据需要时间，直到它可以使用。如果您将数据表移动到成功回调中，那么确保dataku在您使用时可用。

希望有所帮助

Answer 2

另一种方法是在Datatables中直接使用AJAX作为数据源：

$('#tabelTransaksiPerTglBukopin').DataTable({
  ajax: {
    url: base_url + 'laporan/load_trx_per_tgl_bukopin',
    dataSrc: ''
  },
  'dom': 'Zlfrtip',
  'scrollX': true,
  'columns': [{
      "data": "Lembar_BPJS_Kesehatan"
    },
    {
      "data": "Total_BPJS_Kesehatan"
    },
    {
      "data": "Lembar_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT"
    },
    {
      "data": "Total_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT"
    },
    {
      "data": "Lembar_PDAM_TIRTA_UMBU_KAB__NIAS"
    },
    {
      "data": "Lembar_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR"
    },
    {
      "data": "Total_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR"
    },
    {
      "data": "Lembar_PLN_Postpaid"
    },
    {
      "data": "Total_PLN_Postpaid"
    },
    {
      "data": "Lembar_Pulsa_Listrik"
    },
    {
      "data": "Total_Pulsa_Listrik"
    },
    {
      "data": "Lembar_Telkom"
    },
    {
      "data": "Total_Telkom"
    },
    {
      "data": "tgl_dari"
    },
    {
      "data": "tgl_sampai"
    }
  ]
});

鉴于您的AJAX的JSON结果具有以下格式：

[{
    "Lembar_BPJS_Kesehatan": "2",
    "Total_BPJS_Kesehatan": "56000",
    "Lembar_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT": "5",
    "Total_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT": "398300",
    "Lembar_PDAM_TIRTA_UMBU_KAB__NIAS": "1",
    "Total_PDAM_TIRTA_UMBU_KAB__NIAS": "23089",
    "Lembar_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR": "319",
    "Total_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR": "20434870",
    "Lembar_PLN_Postpaid": "103",
    "Total_PLN_Postpaid": "10272775",
    "Lembar_Pulsa_Listrik": "30",
    "Total_Pulsa_Listrik": "1905000",
    "Lembar_Telkom": "4",
    "Total_Telkom": "1716000",
    "tgl_dari": "2018-04-20",
    "tgl_sampai": "2018-04-20"
}]

数据不会出现在数据表中

2 个答案: