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>
I tried to console.log some tests in the js function and it seems it isn't called by the html...
Thank you for your answers !
Did you add Bootstrap and table JS?
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
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">
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>
Related
I am using bootstrap-table and I would like to color certain columns red or green based on the value that they are having.
I am having the following table:
function ajaxRequest(params) {
var url = 'https://jsonplaceholder.typicode.com/todos'
$.get(url + '?' + $.param(params.data)).then(function(res) {
params.success(res)
console.log(res)
})
}
function rowStyle(row, index) {
if (row.trx_type.includes("Purchase")) {
return {
css: {
'background-color': 'lightcoral';
}
}
}
if (row.trx_type.includes("Sale")) {
return {
css: {
'background-color': 'lightgreen';
}
}
}
}
function BuySellFormatter(value, row, index) {
if (row.title.includes("et")) {
return "Purchase"
}
return "Sale"
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<h2>Products</h2>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" data-row-style="rowStyle" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="userId" scope="col">userId</th>
<th data-field="id" scope="col">id</th>
<th data-field="title" scope="col">title</th>
<th data-field="completed" scope="col" data-formatter="BuySellFormatter">Buy/Sell</th>
<th data-field="completed" scope="col">completed</th>
</tr>
</thead>
</table>
Is there a way to style each row like the following:
I am using rowStyle to apply my style, however, as you can see above the css is not correctly applied.
Any suggestions what I am doing wrong?
I appreciate your replies!
Based on your data-field, there's no property for trx_type therefore in your rowStyle function, the row.trx_type will be undefined.
You can achieve the effect similar to your BuySellFormatter method, by accessing the title property.
function ajaxRequest(params) {
var url = 'https://jsonplaceholder.typicode.com/todos'
$.get(url + '?' + $.param(params.data)).then(function(res) {
params.success(res)
console.log('res', res)
})
}
function rowStyle(row, index) {
if (row.title.includes("et")) {
return {
css: {
'background-color': 'lightcoral'
}
}
} else {
return {
css: {
'background-color': 'lightgreen'
}
}
}
}
function BuySellFormatter(value, row, index) {
if (row.title.includes("et")) {
return "Purchase"
}
return "Sale"
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<h2>Products</h2>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" data-row-style="rowStyle" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="userId" scope="col">userId</th>
<th data-field="id" scope="col">id</th>
<th data-field="title" scope="col">title</th>
<th data-field="buysell" scope="col" data-formatter="BuySellFormatter">Buy/Sell</th>
<th data-field="completed" scope="col">completed</th>
</tr>
</thead>
</table>
I'm trying achieving a datatable like in laravel the yajra datatable, so I thought that I will try the jquery datatable all of them works, but it says no data available and whenever I search or sort it says no data available, even if the data is there. Anyways here is the code, I also added the picture so you would understand. Thank you in advance :)
Picture :
enter image description here
Client.js:
<table className="table table-striped" id="table">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Address</th>
<th>Mobile</th>
<th>Email</th>
<th>Gender</th>
<th>Birthday</th>
<th>Facebook Page</th>
<th>Facebook Name</th>
<th>Existing</th>
<th>Remarks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>{this.clientList()}</tbody>
</table>
my index.html :
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script>
$(document).ready(function () {
$('#table').DataTable();
});
</script>
Solved it using this to do it:
import MUIDataTable from "mui-datatables";
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
},
},
];
render() {
const { clients } = this.state;
<MUIDataTable data={clients} columns={columns} />
}
I have included the JS and HTML script to see if anyone may see issues with these scripts? They are for a SharePoint list and both files are stored in a site asset library.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/SiteAssets/GetData.js"></script>
<!--External js file to get data from SharePoint List -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/css/dataTables.jqueryui.min.css">
</head>
<body>
<div>
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
<!--GetData JS script below-->
function loadItems() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeeInfoTest')
/items?$select=Title,Position,Office,Age,Joining_x0020_Date";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
$('#table_id').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Position"
},
{
"mData": "Office"
},
{
"mData": "Age"
},
{
"mData": "Joining_x0020_Date"
}
]
});
} catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errMessage) {
alert("Error: " + errMessage);
}
The first portion is the HTML page, and then the second part of the script is the JS. I have commented out where the JS script starts.
Here is the output I get in SharePoint-image below:
GetData output error
well error is hard to find but still u have missed out few steps when starting with js
this link i have sent will help u out
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/
I didn't find where you call the function loadItems, I load SharePoint list data after DOM ready usually as _spPageContextInfo depends on SharePoint JS libraries init(so _spPageContextInfo may not init correctly if you use it if you not delay your rest request ).
Sample demo:
<table id="example" class="wpDataTable" style="width:100%">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>City</th>
<th>TestNumber</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Title</th>
<th>City</th>
<th>TestNumber</th>
</tr>
</tfoot>
</table>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('listtitle')/items?$select=Title,City,TestNumber&$orderby=Created",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (result) {
_Data = result.d.results;
$('#example').DataTable({
columns: [
{ "data": "Title" },
{ "data": "City" },
{ "data": "TestNumber" }
],
data: _Data,
"displayLength": 25
})
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
})
</script>
I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.
**activity_show.php**
<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid"
aria-describedby="datatable-buttons_info" style="width: 948px;">
<thead>
<th>id</th>
<th>Date </th>
<th>id2</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
Using the below given code the table is called for displaying.
**activity.php**
<div class="row">
<div id="userTable"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
showactivity();
});
function showactivity(){
$.ajax({
url: 'activity_show.php',
type: 'POST',
async: false,
data:{
show: 1
},
success: function(response){
$('#userTable').html(response);
}
});
}
You can use these functions to first create and then update the datatable where needed.
1) Make sure all of the tables with a specific class are DataTable by default.
$(document).ready(function(e) {
$('.dataTable').DataTable();
});
2) Update the table after you've submitted your Ajax.
$('.dataTable').change(function(e) {
$('.dataTable').draw();
});
My html header:
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
jquery:
function apply_pagination() {
console.log("apply_pagination called")
console.log("total pages", totalPages)
$pagination.twbsPagination({
totalPages: totalPages,
visiblePages: 6,
onPageClick: function (event, page) {
displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
endRec = (displayRecordsIndex) + recPerPage;
displayRecords = records.slice(displayRecordsIndex, endRec);
console.log("i am inside onpageclick");
generate_table();
}
});
}
html:
<div class="container">
<div class="table-responsive">
<h2>View Installment Details</h2>
<table class="table">
<tbody id="emp_body">
<tr>
<th>Customer ID</th>
</tr>
<tr>
<th>Transaction ID</th>
</tr>
<tr>
<th>First Due Amount</th>
</tr>
<tr>
<th>First Due Date</th>
</tr>
<tr>
<th>Second Due Amount</th>
</tr>
<tr>
<th>Second Due Date</th>
</tr>
</tbody>
</table>
<div id="pager">
<ul id="pagination" class="pagination-lg"></ul>
</div>
</div>
</div>
The console.log inside onPageClick is not being called. Is there a reason why ? It works in my staging environment but not in production.
EDITED:
Added html code for pagination. It works well in staging but not production.
The reason for twbs pagination to not display data is because your variable totalPages has a value of 1, as per this code function:
// hide if only one page exists
if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
if (this.options.initiateStartPageClick) {
this.$element.trigger('page', 1);
}
return this;
}
Make sure totalPages is >1 or it won't display any pager.