Bootstrap自定义Ajax表格无法正常工作及加载异常问题咨询

Hey there, let’s break down your problem step by step—first off, Ajax is absolutely still compatible with Bootstrap Table, so that’s not the root issue here. The "perpetual loading" state you’re seeing (both in your custom code and the official example) is almost always tied to a specific configuration misstep, resource problem, or backend hiccup.

Common Causes & Fixes for Stuck Loading Tables #

• Bad Ajax Endpoint or Malformed Response
  Double-check that your API URL is correct and the backend is actually reachable. If the server returns a non-200 status code (like 404, 500) or data that doesn’t match Bootstrap Table’s expected structure, the table won’t know how to render the content and will stay stuck loading. The required response format looks like this:

  {
    "total": 2,
    "rows": [
      {"id": 1, "username": "john_doe"},
      {"id": 2, "username": "jane_smith"}
    ]
  }
  

  Use your browser’s DevTools > Network tab to inspect the Ajax request—you’ll see right away if the call is failing or returning invalid data.

• CORS Blocking the Request
  If your frontend and backend are on different domains, browsers block cross-origin requests by default. Look for CORS errors in the DevTools Console tab. To fix this, your backend needs to send cross-origin allow headers (like Access-Control-Allow-Origin: * for testing, or restrict it to your specific domain in production).

• Missing/Out-of-Order Dependencies
  Bootstrap Table relies on jQuery and Bootstrap core to work properly. If you’re loading these in the wrong order, or missing one entirely, Ajax functionality will break. Make sure your imports follow this sequence:

  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <script src="bootstrap-table.min.js"></script>
  

  Also, check that you’re using compatible versions—mixing old jQuery with a new Bootstrap Table release can cause unexpected bugs.

• Misconfigured Table Options
  Even a tiny typo in your Bootstrap Table initialization can stop Ajax from working. For basic setups, ensure you’ve defined the url and columns correctly:

  $('#my-table').bootstrapTable({
    url: '/api/users',
    method: 'GET',
    columns: [
      { field: 'id', title: 'User ID' },
      { field: 'username', title: 'Username' }
    ]
  });
  

  If you’re using a custom ajax function, make sure you’re calling the provided success/error callbacks properly to feed data back to the table:

  $('#my-table').bootstrapTable({
    ajax: function (request) {
      $.ajax({
        url: '/api/users',
        data: request.data,
        type: 'GET',
        success: function (response) {
          // Pass the formatted data to the table
          request.success({
            total: response.total_users,
            rows: response.user_list
          });
        },
        error: function () {
          request.error();
        }
      });
    },
    columns: [...]
  });
  

• Browser Cache or Extension Interference
  Sometimes browser cache can serve stale resources, or ad-blockers/security extensions might block the Ajax request. Try clearing your browser cache, opening the page in incognito mode, or disabling extensions to rule out these issues.

A Note on the Official Example Page #

If the official example is stuck loading for you, that’s likely a temporary issue—maybe the demo server is down, CDN resources are failing to load, or your local browser is interfering. Refresh the page, try a different browser, or wait a bit and it should start working again.

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