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.
Related
I would like to add and later to remove a table with all rows from jquery dialog. I would also like to add some css style to this table/rows.
The table should go into empty div id=dialog-message1.
Could someone help me with this, please?
function script part is attached bellow:
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
console.log(product_name);
$("#dialog-message1").append("<table id='tableINFO'>");
$("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
$("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");
$("#dialog-message1").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
//$( "tr" ).remove();
}
}
});
});
I have tried adding rows and cols, and removing it, but since there was no id provided I could only remove tables from the entire page.
I can see rows, but I cannot remove it.
https://jsfiddle.net/asimshahiddIT/3vdup6jr/
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
console.log(product_name);
$("#dialog-message1").append("<table id='tableINFO'><tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr><tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");
$("#dialog-message1").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
$( "#dialog-message1 table" ).remove();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog-message1">
</div>
<button class="confirmation1">
CLICK
</button>
The table is binded to the dialog, you can try removing its children.
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
// console.log(product_name);
$("#dialog-message1").append("<table id='tableINFO'>");
$("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
$("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");
$("#dialog-message1").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
$("#dialog-message1").children().remove();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="confirmation1">Confirm</button>
<div id="dialog-message1"></div>
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({
......
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
I have a div that needs to be displayed in full-screen as an intro. The problem is that it doesn't display correctly; it just displays itself in the top left corner and grows until its full-screen. Why is it doing this?
show() takes the duration of the animation as a first parameter. You have given it a function, which is incorrect. Either you meant to chain your methods:
$('#intro-page').show().click(function () {
$(this).fadeOut(250);
});
Or, you did mean to put a callback function in there, but you missed out the first parameter; the duration:
$('#intro-page').show(250, function(){
$(this).click(function(){
$(this).fadeOut(250);
});
});
Documentation
show()
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
try the following:
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show();
$('#intro-page').click(function(){
// seperate it from show function call so you can have more access to object
// and do logic on it.
$(this).fadeOut(250);
});
}
});
</script>
I was able to retrieve all row values via table click event and getting its value via event.currentTarget.cells[4].innerText();.
But i would like to apply this if a specific column is clicked only like, when i clicked an ID 21 under Username column. It should alert all the cell values of the row. And then when I clicked the other columns it should not alert.
This is my code. Please inform me if you are having problems the way I ask.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
alert(event.currentTarget.cells[0].innerText);
alert(event.currentTarget.cells[1].innerText);
alert(event.currentTarget.cells[2].innerText);
alert(event.currentTarget.cells[3].innerText);
alert(event.currentTarget.cells[4].innerText);
});
});
</script>
Here is my HTML http://jsfiddle.net/jE5UM/
Try
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
$(this).children().each(function(){
alert($(this).text())
})
});
});
Demo: Fiddle
If you want an array as the result then
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var texts = $(this).children().map(function(){
return $.trim($(this).html())
}).get();
});
});
Demo: Fiddle
Update
$(document).ready(function () {
$('#tableid').on('click', 'tr td:nth-child(2)', function (event) {
var texts = $(this).closest('td').siblings().addBack().map(function(){
return $.trim($(this).html())
}).get();
alert(texts.join())
});
});
Demo: Fiddle
I'd suggest, in the absence of specific HTML and other information:
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var cell = event.target,
values = $(cell).siblings().addBack().map(function(){
return $(this).text();
}).get();
alert(values);
});
});
JS Fiddle demo.
References:
addBack().
get().
map().
on().
siblings().
text().
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(); } );
});