JQuery Datatables pagination - javascript

I can't get my pagination to work after I added a date filtering plug-in to datatables.
The original code was like this and it was picking up the pagination fine.
$(document).ready(function() {
$('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
this is my current one with the plug in variables
$(document).ready(function() {
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});
Thanks in advance.

Well, in your current function, this part:
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
should be written like this:
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
Edit
In case it wasn't clear, the full jQuery code should look like this:
$(document).ready(function() {
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});

Related

dataTable - can't select all check boxes and make them checked

So I cannot get all of the checked boxes without an error. I am using dataTable but it seems to be erroring out.
Here is my code:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"dom": '<"top"fl>rt<"bottom"pi><"clear">'
/*'<"top"lf>rt<"bottom"p><"clear">'*/
});
});
function selectAllUsers() {
$(':checkbox').each(function () {
this.checked = true;
});
var table = $('#myTable').dataTable({
});
var allPages = table.fnGetNodes();
$('input[type="checkbox"]', allPages).prop('checked', true);
}
</script>
The code above will select all boxes but then I get a second error message with the dataTable.
but if I do:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"dom": '<"top"fl>rt<"bottom"pi><"clear">'
/*'<"top"lf>rt<"bottom"p><"clear">'*/
});
});
function selectAllUsers() {
$(':checkbox').each(function () {
this.checked = true;
});
var table = $('#myTable').dataTable({
});
}
</script>
Then I only get the first page checked. Any help would be greatly appreciated.
Solution: https://datatables.net/plug-ins/api/fnGetHiddenNodes
That will show you how to get non-rendered checkboxes.

Cannot change page in datatable

i've a problem with my datatable...
The problem is: I can't change the page after inizialization....
The workflow that i desire is:
A user select a radiobutton in page 3
i save the id of this radio and the curent page
i destroy datatable
when user re-enter in datatable (re-creating datatable) I wish that user would go directly to the page 2
This is my code:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
});
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
});
P.S. 2 is an example to test function :)
But i get this error in consolle:
Uncaught TypeError: oTable.fnPageChange is not a function
What can i do?
Thanks
Use stateSave, it will do exactly what you need atomatically :
var oTable = $("#id").DataTable({
stateSave : true,
...
});
Now each time the table is instantiated it will restore the settings from last session, i.e pagination, sorting, search-phrase ...
Could you try this ?
$(document).ready(function() {
var currentPaging = 1;
$('#example').DataTable( {
responsive: true
} );
var oTable = $('#example').dataTable();
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
$('#example').on( 'page.dt', function () {
var info = $('#example').DataTable().page.info();
var page = info.page + 1;
alert('Current paging : '+page);
currentPaging = info.page + 1;
});
$('#memorizePaging').on("click", function (e) {
alert("I'm on the page : "+currentPaging);
});
} );
I did a fiddle to show you fnPageChange works : https://jsfiddle.net/z4zgp9az/5/
It seems the "DataTable" should begins from small character "dataTable"
It should helps:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
change to:
$('.js_select').click(function (e) {
var oTable = $("#id").dataTable({
......

JQuery Datatable textbox column hover

I'm new to JQuery and datatables, I have a question about using textboxes in a Jquery UI datatable column. I have a column which has textboxes. When I hover over a row I want my textbox background and border to change. I have added the logic to add/remove the css class using JQuery, but it does not seem to work in a datatable.
$('tr').each(function () {
$('this').hover(function () {
$('#myText').addClass('hover');
}, function () {
$('#myText').removeClass('hover');
});
});
Here is the JSFiddle
Any ideas using JQuery?
you dont need jquery to do this just use css:
#example tr input:hover{
background-color: red;
border: 1px solid gray;
}
fiddle
if you want a jquery solution use this
table = $('#example').dataTable({
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$('td:eq(1)', nRow).hover(
function() { $(this).find("input").addClass("hover") } ,
function() { $(this).find("input").removeClass("hover") }
);
}
});
fiddle
this will effect the entire row
table = $('#example').dataTable({
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$(nRow).hover(
function() { $(this).find("input").addClass("hover") } ,
function() { $(this).find("input").removeClass("hover") }
);
}
});
fiddle
The CSS3 is the most elegant solution but if you really wanna do it with jquery do it like this:
$('tr').each(function () {
$(this).hover(function () {
$(this).toggleClass('hover');
});
});
In this case you shouldn't set the this in ', because it hands over the scope, the class or object you're in.

FixedHead in datatables doesn't work after removing pagination

When I delete the line “paginate”: false inside of the javascript box,
the Fixedheader doesn’t work anymore but I don’t want pagination. Is there any way to avoid this?
Here's the code: http://jsfiddle.net/xF8hZ/128/
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false
"paginate": false
} );
new $.fn.dataTable.FixedHeader( table, { "left": true } );
$('.filterName').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).data('filter');
table.column(0).data().search(filterValue).draw();
});
} );
I assume you meant to say
When I put the line “paginate”: false inside of the javascript box...
That's because you missed a comma there, should look like this:
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false,
"paginate": false
} );

DataTables plugin for jquery and click event

I am trying to succeed at getting this jquery plugin to work corretly. What I need is a click event that will alow me to click a row and have a js window that will load another page using the row_id that is the primary key in the database. I'm really lost with javascript but I like the plugin and really would like to have this work if possible. I have been at this for a couple of days now. I know I'm close but haven't hit the mark yet. If someone could please help me, I'd be really grateful. I am using json to import the data.
Here is my current code. It will compile now but the .click event won't fire. :/
$(document).ready(function() {
oTable = $('#search').dataTable(
{
"sPaginationType": "full_numbers",
"bProcessing": true,
"iDisplayLength": 15,
"sAjaxSource": 'json.php',
"fnInitCallback": function ()
{
$(oTable.fnGetNodes() ).click(function ()
{
//alert();
});
}
});
});
You need to replace fnInitCallBack with fnInitComplete and it will work.
oTable = $('#search').dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"iDisplayLength": 15,
"sAjaxSource": 'json.php',
"fnInitComplete": function (){
$(oTable.fnGetNodes()).click(function (){
// my js window....
});
}
});

Categories

Resources