I got this code from another question, but my question is how could this code be modified so that each column header can have a custom, unique tooltip? For example, user hovers over Salary and tooltip displays "some text", and when you hover over Start Date, it displays "some different text" ? I assume I would have to change the .each() function to something else, but I'm not too well versed in JavaScript to know how to approach this.
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/qgcu',
"initComplete": function(settings){
$('#example thead th').each(function () {
var $td = $(this);
$td.attr('title', $td.text());
});
/* Apply the tooltips */
$('#example thead th[title]').tooltip(
{
"container": 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>
Yes, You are almost on the way.
This .each function $('#example thead th').each(function () { is used to set the title(ToolTip) of header.
There are number of ways to do this.
1. In this .each function you can check the header text and then can decide your custom text.
Here is the code snippet:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/qgcu',
"initComplete": function(settings){
$('#example thead th').each(function () {
var $td = $(this);
var headerText = $td.text();
var headerTitle=$td.text();
if ( headerText == "Name" )
headerTitle = "custom Name";
else if (headerText == "Position" )
headerTitle = "custom Position";
else if ( headerText == "Office" )
headerTitle = "custom Office";
else if ( headerText == "Salary" )
headerTitle = "custom Salary";
else if ( headerText == "Start Date" )
headerTitle = "custom Start Date";
$td.attr('title', headerTitle);
});
/* Apply the tooltips */
$('#example thead th[title]').tooltip(
{
"container": 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>
2. Set the custom title attribute as a header attribute and .each function you can get custom title attribute and set as title(ToolTip) of header.
Here is the code snippet:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/qgcu',
"initComplete": function(settings){
$('#example thead th').each(function () {
var $td = $(this);
$td.attr('title', $td.attr('custom-title'));
});
/* Apply the tooltips */
$('#example thead th[title]').tooltip(
{
"container": 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th custom-title="custom Name">Name</th>
<th custom-title="custom Position">Position</th>
<th custom-title="custom Office">Office</th>
<th custom-title="custom Salary">Salary</th>
<th custom-title="custom Start Date">Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>
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>
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.
I am using a data table to display my data and I want to export them to pdf.
I followed steps listed in example given in this link.
I am having a table in which I want two headers and out the two headers, one header having colspan i.e. as shown below
<th colspan=3>
So, when I try to export the table to pdf, it gives me only one header and that too having full column description.
My code snippet with all the required CSS and JS files is as below:
<link href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan = 3></th>
<th colspan = 3>IMP values</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
The image below shows, table as seen in the browser
The image below shows, table as seen after exported to pdf
So, how can I get two headers in pdf using data table?
Thanks in advance.
The pdf exporting function currently only consider 1 row of column header, hence only one header row is exported.
In order to export with two header rows, we can make use of the customize option provided in the pdf export button. This option allow us to manipulate the pdf document object before export. By referring pdfmake documentation and the playground for table, we can see that the following changes are required to have more than one table header row.
Set the headerRows (no of header row) of the table to 2.
Insert the missing header row to the first of the pdf table body, as the header row cell given has col-Span, empty cell need to add to the header row to ensure each row have the same number of cells.
The following code snippet demonstrates the above changes.
Due to Download in Sandboxed Iframes (removed), the button in the code snippet will not work, you may copy the following code to an html file, and open the file with a browser to see the effect.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', {
extend: 'csv',
"download": "download"
}, {
extend: 'excel',
"download": 'download'
}, {
extend: 'pdf',
text: 'Export with two row headers',
download: 'download',
customize: function(pdfDocument) {
pdfDocument.content[1].table.headerRows = 2;
var firstHeaderRow = [];
$('#dataTable').find("thead>tr:first-child>th").each(
function(index, element) {
var colSpan = element.getAttribute("colSpan");
firstHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan
});
for (var i = 0; i < colSpan - 1; i++) {
firstHeaderRow.push({});
}
});
pdfDocument.content[1].table.body.unshift(firstHeaderRow);
}
}, {
extend: 'print',
download: 'download'
}
]
});
});
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>IMP values</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>