For some reason the pagination on my datatable isn't working... I get no errors and everything else seems to work fine except pagination...
This is what it looks like:
Clicking on the buttons does nothing and also returns no errors.
I am simply loading it in jQuery on page ready like so:
('#participantsTable').DataTable({
bSortable: true,
paging: true,
bFilter: true,
});
The sorting works, the filter works, just the paging doesn't.
The HTML looks like this:
<table id="participantsTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="participant-name">Simon</td>
<td class="participant-email">email#email.com</td>
</tr>
//20 more tr's
</tbody>
</table>
Does anyone have any idea? Thanks!
Related
As you can see the Datatools [Copy, CSV, Excel, PDF, Print] tools is displayed that way that it forces the Search Filter to go to the middle.
I believe my code is correct I am inserting that tool before the dataTables_wrapper which is existing. The Datatools should go to the top and Search Filter should be aligned horizontally with the Show Entries Tool.
var t = $('#formList').DataTable({ "order": [[ 1, "desc" ]] });
var tt = new $.fn.dataTable.TableTools(t);
$( tt.fnContainer()).insertBefore('div.dataTables_wrapper');
My HTML
<table id="formList" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="6"> <center>Form Information<center></th>
</tr>
<tr>
<th>ID</th>
<th>Form #</th>
<th>Date</th>
<th>Plan Holder</th>
<th>Telephone</th>
<th>Status</th>
</tr>
</thead>
</table>
The Datatables Tool should align like this:
I want to display data from a database in a JSP table dynamically. I'd like to make my table scrollable, sortable (ascending and descending), searchable and paginatable.
See this link for example; you'll find a table with sortable columns, search functionality and paginating.
I would like to achieve something similar to that datatable.
The JSP page looks like this
<html>
<body>
<div class="container" style="overflow:scroll;
height:250px;width:100%;overflow:auto">
<TABLE id="example" class="table table-striped">
<thead>
<TR valign=top class="header">
<TH bgcolor="#008000">ATM Site No</TH>
<TH bgcolor="#008000">ATM Location</TH>
<TH bgcolor="#008000">LHO</TH>
<TH bgcolor="#008000">Cash</TH>
<TH bgcolor="#008000">Non Cash</TH>
<TH bgcolor="#008000">Revenue</TH>
<TH bgcolor="#008000">Up Time</TH>
<TH bgcolor="#008000">Up Time Date</TH>
</TR>
</thead>
<s:iterator value="uptimeBeans">
<tbody>
<TR valign=top>
<TD><s:property value="ATM_Site_No"/></TD>
<TD><s:property value="ATM_Location"/></TD>
<TD><s:property value="LHO"/></TD>
<TD><s:property value="Cash"/></TD>
<TD><s:property value="Non Cash"/></TD>
<TD><s:property value="Revenue"/></TD>
<TD><s:property value="Up Time"/></TD>
<TD><s:property value="Up Time Date"/></TD>
</TR>
</tbody>
</s:iterator>
</TABLE>
</div>
</body>
</html>
You just need to call this script for using datable after adding jquery and datatable js :-
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"scrollX": true,
"order": [[ 1, "desc" ]]
} );
} );
Here, 1 is column no. needed to sort , you can change it as per need.
Refer datatable intialization
datatable sorting
datatable scrolling
Use this script for dynamic sorting in datatable.
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
please refer this URL for dynamic sorting in datatable:
https://datatables.net/examples/basic_init/table_sorting.html
I want to add rows to the datatable when the page is displayed using a javascript array.
I am trying to figure this out, but the row does not get add. Any help is appreciated..
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Your code works fine, but only with version 1.9.x (or earlier) of the plugin.
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Following the examples on the datatables.net web site for the latest version (1.10.x):
$('#dataTables-example').DataTable().row.add([
'1', '1', '1'
]).draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
From the API, this is one of the ways to add rows:
var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();
Demo#Fiddle
To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here.
In acknowledgement that the above code structure isn't always particularly
attractive, DataTables as a retrieve [DT] option which can be used to tell
DataTables that you are aware that the initialisation options can't be
changed after initialisation, and that should that occur, that you
just want the DataTable instance to be returned.
This optional parameter can provide a short-cut to the explicit check
using $.fn.dataTable.isDataTable() as above when obtaining a
DataTables instance:
table = $('#example').DataTable( {
retrieve: true,
paging: false } );
Maybe you can generate the row before and then append it to the tbody just using jQuery
$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");
I am using the DataTable jQuery plugin (http://datatables.net/) and I would like to disable the default ordering of each column when you click on the TH element and instead specify another element for ordering (which will be a child of each TH).
I have this in JS
var table = $('.table-striped').DataTable({
"ordering": false
});
table.order.listener( $('#sort'), 1);
And this in HTML
<table class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th><span id="sort">Col 1</span></th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>2</span></td>
<td><span>CHARLIE</span></td>
<td><span>DELTA</span></td>
</tr>
<tr>
<td><span>1</span></td>
<td><span>ALPHA</span></td>
<td><span>BETA</span></td>
</tr>
</tbody>
Fiddle
So I believe that when clicking on the SPAN with ID of 'sort', the table should be sorted by column 1- however it does not :( Any ideas??
BTW, jQuery & DataTables are all initalised correctly and I can get other DataTable functionality like pagination working :)
So, my solution was to enable the default order on DataTables, and then to prevent the ordering event having an affect on elements [that I didnt want the sort event to work on] in the TH with a return false:
var table = $('.table-striped').DataTable({
"ordering": true
});
$('.table-striped th div').click(function() {
return false;
})
<table class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th><span id="sort">Sort me</span><div>No sort</div></th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>2</span></td>
<td><span>CHARLIE</span></td>
<td><span>DELTA</span></td>
</tr>
<tr>
<td><span>1</span></td>
<td><span>ALPHA</span></td>
<td><span>BETA</span></td>
</tr>
</tbody>
Hope that helps!
index.html:
<div ng-view="myview.html"></div>
myview.html:
<table class="table table-striped table-hover">
<tr>
<td>Name</td>
<td>Product</td>
</tr>
<tr ng-repeat="deal in deals" class="clickableRow">
<td>{{deal.name}}</td>
<td>{{deal.product}}</td>
</tr>
</table>
script.js:
$(document).ready(function($) {
$(".clickableRow").click(function() {
console.log("click");
});
}); // does nothing
console.log($(".clickableRow").length) // returns 0
I want to do some work when the user clicks on the clickableRows rows.
Thanks
why do you mix jquery and angularjs like this ? you can just do it with angularjs
<tr ng-repeat="deal in deals" ng-click="clickRow(deal)">
and in your controller
$scope.clickRow = function(deal) {
console.log(deal)
}