JSON数据无法在DataTables中显示的技术问题咨询

Hey there, let's work through why your JSON data isn't rendering in DataTables. Based on the snippet you shared, here are the most likely culprits and how to fix them:

1. Fix Invalid JSON Syntax First #

Looking at your JSON, the final entry "Total_Pulsa_Listrik": "..." is invalid—"..." isn't a valid JSON value (it needs to be a number, proper string, null, or another valid JSON type). DataTables can't parse malformed JSON, so this will immediately break rendering.

Fix this by replacing the placeholder with a valid value:

• If it's a numeric total, use "Total_Pulsa_Listrik": 15000
• If data is missing, use "Total_Pulsa_Listrik": null
• If it's a temporary placeholder, use "Total_Pulsa_Listrik": "0"

You can quickly validate your JSON by running JSON.parse('your-json-string') in your browser's console—any syntax errors will pop up immediately.

2. Explicitly Map JSON Keys to DataTables Columns #

Your JSON has long, spaced keys (like "Lembar_BPJS_Kesehatan"), so DataTables won't automatically guess which keys map to which columns. You need to define this mapping in your DataTables configuration.

Here's a working example setup:

$(document).ready(function() {
  $('#your-table-id').DataTable({
    // If loading via AJAX:
    ajax: {
      url: 'path-to-your-json-data',
      dataSrc: '' // Critical! Use this because your JSON is a top-level array (no wrapping { data: [...] })
    },
    // OR if passing JSON directly in code:
    // data: yourJsonArrayVariable,
    columns: [
      { data: 'Lembar_BPJS_Kesehatan', title: 'Lembar BPJS Kesehatan' },
      { data: 'Total_BPJS_Kesehatan', title: 'Total BPJS Kesehatan' },
      { data: 'Lembar_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT', title: 'Lembar PDAM Tirta Bulian' },
      { data: 'Total_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT', title: 'Total PDAM Tirta Bulian' },
      // Add all remaining key-column mappings here
      { data: 'Total_Pulsa_Listrik', title: 'Total Pulsa Listrik' }
    ]
  });
});

The dataSrc: '' option is key here—without it, DataTables will look for a data property in your JSON (which doesn't exist), so it won't find any rows to display.

3. Fix Data Type Mismatches (For Better Functionality) #

Most of your "Total" fields are stored as strings (e.g., "Total_BPJS_Kesehatan": "56000"), but they're numeric values. While DataTables can display strings, sorting and filtering will behave weirdly (e.g., "100000" will come before "20000" lexicographically).

You have two fixes here:

1. Update your JSON to store numeric values as numbers:

   "Total_BPJS_Kesehatan": 56000,
   

2. Use DataTables' render option to convert strings to numbers on the fly (and format them nicely):

   { 
     data: 'Total_BPJS_Kesehatan', 
     title: 'Total BPJS Kesehatan',
     render: function(rawValue) {
       return parseInt(rawValue).toLocaleString(); // Adds commas for readability
     }
   }
   

4. Double-Check Your Dependencies #

Make sure you've included all required files for DataTables to work:

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<!-- jQuery (required for DataTables) -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- Your table element -->
<table id="your-table-id" class="display" style="width:100%"></table>

If any of these are missing or loaded out of order, DataTables won't initialize properly.

5. Debug with Browser Dev Tools #

If it's still not working, open your browser's developer tools (F12) and check:

• Console tab: Look for JSON parsing errors (indicates invalid JSON) or DataTables-specific errors (e.g., missing column definitions).
• Network tab: If loading via AJAX, confirm your JSON is being loaded correctly (check the response body for errors).

内容的提问来源于stack exchange，提问作者Hendri Am