Datatables+Bootstrap可折叠行表格AJAX数据加载失败求助

Hey there! Let's troubleshoot this Datatables + Bootstrap issue step by step—since you're seeing "No data available in table" when trying to load data from test.txt, here are the most common fixes and checks to run:

1. Verify your test.txt data format matches Datatables expectations #

Datatables expects a specific JSON structure by default. If your file doesn’t follow this, it won’t parse the data correctly:

• Default required format (wrapped in a data key):

  {
    "data": [
      ["Row 1 Col 1", "Row 1 Col 2", "Row 1 Col 3"],
      ["Row 2 Col 1", "Row 2 Col 2", "Row 2 Col 3"]
    ]
  }
  

• If your test.txt is just a raw array (no data wrapper), add the dataSrc: '' config to your Datatables initialization to tell it to use the root array directly.

2. Double-check your AJAX path #

Make sure the url in your AJAX config points to the correct location of test.txt:

• If the file is in the same folder as your HTML, use url: 'test.txt'
• If it’s in a subfolder (e.g., a data directory), use url: './data/test.txt'
• Open your browser’s dev tools (F12 → Network tab) to see if the request to test.txt returns a 404 error—this means your path is wrong.

3. Validate your Datatables initialization code #

Here’s a working example of a Bootstrap-styled Datatables setup with AJAX and collapsible rows, tailored to your use case:

$(document).ready(function() {
  $('#your-table-id').DataTable({
    // Bootstrap integration
    dom: 'Bfrtip',
    className: 'table table-striped table-bordered',
    // AJAX config
    ajax: {
      url: 'test.txt',
      dataSrc: '' // Uncomment this if test.txt is a raw array (no "data" key)
    },
    // Match columns to your data structure
    columns: [
      { title: 'First Column' },
      { title: 'Second Column' },
      { title: 'Third Column' }
    ],
    // Collapsible row setup (responsive details)
    responsive: {
      details: {
        renderer: function(api, rowIdx, columns) {
          let expandedContent = $.map(columns, function(col) {
            return col.hidden ? 
              `<tr>
                <td><strong>${col.title}:</strong></td>
                <td>${col.data}</td>
              </tr>` : '';
          }).join('');
          
          return expandedContent ? $('<table/>').append(expandedContent) : false;
        }
      }
    }
  });
});

• Ensure the number of columns entries matches the number of fields in each row of your test.txt data.
• Confirm you’ve loaded all required files in the correct order:
  1. jQuery
  2. Bootstrap CSS
  3. Datatables Bootstrap CSS (e.g., dataTables.bootstrap5.css)
  4. Bootstrap JS
  5. Datatables Bootstrap JS (e.g., dataTables.bootstrap5.js)

4. Check for browser errors and cross-domain issues #

• Open the dev tools Console tab to look for JavaScript errors (e.g., missing libraries, syntax mistakes).
• If you’re opening your HTML file directly via file:// protocol, some browsers block local AJAX requests. Run a local server (like Python’s python -m http.server or XAMPP) to serve your files instead.

5. Test direct access to test.txt #

Type the full URL of test.txt into your browser’s address bar. If it doesn’t load the expected JSON, the issue is with the file itself or its accessibility—not Datatables.

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