Bootstrap table with AJAX "Loading, please wait..."

bootstrap-table server side pagination
bootstrap table pagination
bootstrap table load data
bootstrap table with ajax call
bootstrap-table data-show-columns
bootstrap table data-url
bootstrap table refresh
bootstrap table sort

I'm trying to use a bootstrap table with an ajax request like in this example: https://examples.bootstrap-table.com/#options/table-ajax.html

But, like in the example, my data don't load and I only get a message saying "Loading, please wait...". I tried to hide the message by using bootstrapTable('hideLoading'); but then I only get "No matching records found".

Do you have some ideas why either the example on the official website is not working ?

View some code:

function ajaxRequest(params) {
  $.ajax({
    type: "GET",
    url: "getAjax.php",
    dataType: "json",
    success: function(data) {
      params.success({
        "rows": data,
        "total": data.length
      })
    },
    error: function(er) {
      params.error(er);
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
  id="rtcapi">

  <thead class="thead-light">
    <tr>
      <th data-field="id">#</th>
      <th data-field="status">Status</th>
      <th data-field="ln_demander">Last name</th>
      <th data-field="fn_demander">First name</th>
    </tr>
  </thead>

Did you add Bootstrap and table JS?

<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

Bootstrap Table json from ajax, The following CSS library files are loaded for use in this example to provide the styling of the table: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css /� Defines the side pagination of the table, can only be 'client' or 'server'. Using 'server' side requires either setting the 'url' or 'ajax' option. Note that the required server response format is different depending on whether the 'sidePagination' option is set to 'client' or 'server' .

Yes, I added all these css and js scripts :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
  <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Bootstrap 4, See the ajax documentation and the other Ajax examples for further information. The example below shows DataTables loading data for a table from arrays as� Solution: See this Bootstrap Datatable With Sort, Pagination, and Search, Sorting Table Program. Previously I have shared a JavaScript table filter program that contains a search input for filtering. But this is a proper data table which has multiple filter options like sort, search, and visible items count also it has a pagination feature

Please add

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>

after jquery.min.js

function ajaxRequest(params) {
  $.ajax({
    type: "GET",
    url: "getAjax.php",
    dataType: "json",
    success: function(data) {
      params.success({
        "rows": data,
        "total": data.length
      })
    },
    error: function(er) {
      params.error(er);
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
  id="rtcapi">

  <thead class="thead-light">
    <tr>
      <th data-field="id">#</th>
      <th data-field="status">Status</th>
      <th data-field="ln_demander">Last name</th>
      <th data-field="fn_demander">First name</th>
      <th data-field="date_request">Date request</th>
      <th data-field="name">Name application</th>
      <th data-field="irn">IRN</th>
      <th data-field="internal">Internal/External</th>
      <th data-field="description">Description</th>
      <th data-field="users">Users</th>
      <th data-field="country">Country</th>
      <th data-field="valid_proof">Validation</th>
      <th data-field="date_prod">Date for prod</th>
    </tr>
  </thead>

Ajax sourced data, Bootstrap table, custom ajax, load table in success. NOT recommended approach still, use data-url and responseHandler or ajax options in bootstrapTable if� On clicking, it will open the modal dialog box of Bootstrap, which contains several fields of the employees for saving. We have also added a table, which will be populated with the use of AJAX.

Bootstrap Table - ajax init, not recommended approach, Bootstrap Table - dummy ajax example using jsfiddle "/echo/json/". 2. // Created to help answer https://github.com/wenzhixin/bootstrap-table/issues/#1998. 3. . Ajax sourced data DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. setting the ajaxoption to the address of the JSON data source.

Bootstrap Table - dummy ajax - JSFiddle, Request for Sample Code for Ajax +Json + ServerSide pagination. #2289. Closed. kghulami opened this issue on May 19, 2016 � 14 comments. Closed� Rotated table column headers. 2619. Click sort with html Checkbox. 3345. Check/Uncheck All in all page with server side. 3784. Overwrite the table scrollbar. 3830. Export all records with server side pagination.

wenzhixin/bootstrap-table, bootstrapTable can customize the ajax method, get the data returned by ajax request and display it in the bootstrapTable. This way I think it is simple and� Bootstrap 4 Basic Table. A basic Bootstrap 4 table has a light padding and horizontal dividers. The .table class adds basic styling to a table:

Comments
  • does getAjax.php return any data if opened in the browser?? also, it seems like your function isn't called anywhere, try to put it in pageload on page ready function.
  • Yes my getAjax.php return some json data when opened...
  • Ok I just found the solution thank you very much !! The function was in $(document).ready(function() {} and wasn't called effectively... Thanks !