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({
......
Related
Im trying to append the last id of the URL into the search box of a DataTable. My URL looks like this:
Here I want to get the CL00074 value and append into the search box, like this:
[![enter image description here][1]][1]
<style>
thead {
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}
</style>
<script>
//this is for search
$(document).ready(function () {
$('#dataTables-example').DataTable({
responsive: true,
"order": [[0, "desc"]],
"columnDefs": [{
"targets": 'no-sort',
"orderable": false
});
});
</script>
<script>
var url = window.location.href;
var id = url.substring(url.lastIndexOf('/') + 1);
// alert(id);
$(document).ready(function () {
$('#dataTables-example').append(id);
});
</script>
If you don't understand what I'm asking, let me know guys. Any help is much appreciated
->Thank you guys fro your reply #Rory McCrossan and #Jameel Ahmed Ansari. I have find the solutions .
var id = url.substring(url.lastIndexOf('/') + 1);
// alert(id);
$(document).ready(function () {
$('#dataTables-example_filter input').val(id);
$('#dataTables-example_filter input').keyup();
});
Firstly, to retrieve the required part of the URL it would be easier to split it in to an array and retrieve the final element. You can then use the fnFilter() method of the dataTable to programmatically search for that value:
var dt = $('#dataTables-example').dataTable({
// setup here
});
var id = window.location.href.split('/').pop();
dt.fnFilter(id); // perform the search.
$(document).ready(function () {
var dt = $('#dataTables-example').dataTable({
// setup data table here
});
l=location.href; // to get current URL
// or
l="http://localhost/eezyclinic/Admin/clinicsubmissionslist/CL00074";
url_arr = l.split("/") ;
id = url_arr[url_arr.length-1];
dt.fnFilter(id);
});
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.
Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;
Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.
You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/
If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
Here is my piece of code in jquery actuall I want in such way where :
Where by default value of Ball will be shown in Textbox.
same time either All or Stopall will be work(it's not working here properly :( )
For multiple times checking All button,which is not working according to the expectation
here is the fiddle link : http://jsfiddle.net/bigzer0/PKRVR/11/
$(document).ready(function() {
$('.check').click(function(){
$("#policyName").val('Start');
$("#features").val('');
$('[name="startall"]').on('click', function() {
var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
if (this.checked) {
$checkboxes.prop({
checked: true,
disabled: true
});
}
else{
$checkboxes.prop({
checked: false
});
}
});
$(".check").each(function(){
if($(this).prop('checked')){
$("#policyName").val($("#policyName").val() + $(this).val());
$("#features").val($("#features").val() + $(this).data('name'));
}
});
});
});
Any comments on this context will be welcome
You're code is broken in many ways. You are binding a click event inside a click event. You should take that outside and just make sure it's inside the document.ready function since your element is a static element.
$(document).ready(function() {
// cache features
var $features = $('#features');
// cache policyname
var $policy = $("#policyName");
// cache all/stopall
var $ss = $('[name="startall"],[name="stopall"]');
// cache all others
var $checkboxes = $('input[type="checkbox"]').not($ss);
// function to update text boxes
function updateText() {
var policyName = 'Start';
var features = '';
// LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
$checkboxes.filter(':checked').each(function(i, v) {
policyName += $(v).val();
features += $(v).data('name');
});
// update textboxes
$policy.val(policyName);
$features.val(features);
}
$checkboxes.on('change', function() {
updateText();
// check startall if all three boxes are checked
$('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
});
$('input[name="startall"]').on('change', function() {
$checkboxes.prop({
'checked': this.checked,
'disabled': false
});
updateText();
});
$('input[name="stopall"]').on('change', function() {
$checkboxes.add('[name="startall"]').prop({
'checked': false,
'disabled': this.checked
});
updateText();
});
// updatetext on page load
updateText();
});
FIDDLE
you are checking click function in click function. you should use if statement.
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(); } );
});