I'm using DataTables with JQuery to show some data on my site. I use the search feature to filter the data, and give me the intended results. What I'd like to do is to hide the table until a user begins typing a search in the box, and only then display the proper results. Here's my DataTables code right now:
function renderTable() {
jQuery('.dataTable').show();
jQuery('.dataTables_info').show();
jQuery('.dataTables_paginate').show();
}
function hideTable() {
jQuery('.dataTable').hide();
jQuery('.dataTables_info').hide();
jQuery('.dataTables_paginate').hide();
}
jQuery('.dataTables_filter input').keypress(function() {
if (jQuery('.dataTables_filter input').val() != '') {
renderTable();
} else {
hideTable();
}
});
jQuery(document).ready(function() {
jQuery('#resultsTable').DataTable({
"paging": true,
"pageLength": 25,
"lengthChange": false,
"pagingStyle": "simple_numbers",
"language": {
"search": "",
"searchPlaceholder": "Search for an entry"
},
"order": [1, 'asc']
});
hideTable();
} );
It successfully hides everything from the DataTable but the searchbox on document.ready, but I can't get it to call my renderTables() function when a user clicks in the box and types. I'm not sure if I'm targeting it correctly with: '.dataTables_filter input'. The search input that DataTables renders doesn't have any unique ID I can target, so I have to refer to it from the filter element which contains it.
Try some thing like this:
Make a function to render the datatable with the required filter parameter and call it on search functionality. So that it cannot render table on page load. When your search functionality is initiated it will render the table with the filter parameter.
Ex:
$(document).ready(function(){
$('#search_box').keyup(function(){
var searchStr = $(this).val();
if((searchStr).length)
{
filterData(); // call the filter function with required parameters
}
else
{
// empty the table body
}
});
});
function filterData()
{
// your code
}
You can use the rendered filter input box, then use the drawback function. This is how I did it.
drawCallback: function(settings){
if($('#yourtableid_filter input').val().length > 0) --this is generated by datatable
{
$('#yourtableid tr').show();
} else {
$('#yourtableid tr').hide();
}
}
once the filter input is empty, it will hide everything again.
Related
I have a select field $("#country") in a ACF form on Wordpress backend which triggers the values for a second select field $("#city"). It's a typical Country/City relationship with custom values.
The script is enqueued, the change event is triggered and the second select gets populated with success using this code:
var cities = {
"Spain": [
"Madrid",
"Barcelona"
],
"Portugal": [
"Lisboa",
"Oporto"
]
}
jQuery(document).ready(function($) {
$('#country').change(function () {
loadCities($(this).find("option:selected").val());
}).change();
});
function loadCities(country) {
$('#city').empty();
cities[country].forEach(function(city) {
$('#city').append("<option value='"+city+"'>"+city+"</option>");
});
}
As the list of cities is quite long, I want to use select2 instead of select. Here the changed loadCities function:
function loadCities(country) {
$('#city').empty();
var data = [{id: "", text: ""}];
cities[country].forEach(function(city) {
data.push({id: city, text: city});
});
$('#city').select2({
data: data,
placeholder: "Select a city"
}).trigger('change');
}
The problem is that the options (=cities) don't show up as expected in the select2 list. But they seem to be appended, checking their existence with jquery shows them.
First thing you can dynamically append options using the data attribute even for a multi dimensional json array of objects. But do not initialize the select box twice!
$("#country").select2({ data: data.keys });
Instead destroy it and init with your values, you can also try with change event.
$("#country").select2('destroy').empty().select2({ data: data.keys });
Let me know if this helps.
I am using javascript function for selectall checkbox functionality but this function is not working when i click next page. I am using jquery for pagination. I want if on first page i have 10 records and 10 on next page and so on, then i select selectall checkbox on first page so it should select all the records on first page and all other pages records as well.
I am using apex in my code
Any help will be appreciated.
$ = jQuery.noConflict();
$(document).ready(function() {
$('.table').DataTable( {
"searching": false,
"ordering": true,
"info": true
} );
} );
function checkAll(cb)
{
var inputElem = document.getElementsByTagName("input");
for(var i=0; i<inputElem.length; i++)
{
if(inputElem[i].id.indexOf("checkedone")!=-1)
inputElem[i].checked = cb.checked;
}
}
Following is the code found in data table website in order to remove the paging.
$(document).ready(function() {
$('#example').DataTable( {
"paging": false
} );
} );
My question is how to enable and disable paging on button click.
as when i call DataTable function second time to same table. It shows error that data table is already initiated and im calling it second time.
simply recreate the dataTable using destroy: true and paging:
I wanted to show only the first 10 rows of the table, but still be able to sort the whole table. But I also wanted the ability to click a link and show the whole table.
Here's what I did: (my table is "ka_ad")
First, turn on paging
table_ad = $('#ka_ad').DataTable({
paging: true,
});
Second (optional: I didn't want to display the datatable pagination links and element, so I hid them with css
#ka_ad_length{display: none;}
#ka_ad_paginate{display: none;}
Lastly, toggle the bPaginate setting (I have a button with an ID of "test"):
$('#test').click( function () {
//console.log(mytable.settings()[0]['oFeatures']['bPaginate'] );
if(table_ad.settings()[0]['oFeatures']['bPaginate'] == false)
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = true;
$('#test').html('Show All Rows');
}
else
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = false;
$('#test').html('Show Fewer Rows');
}
table_ad.draw();
});
Try like this.
var oTable;
$(document).ready(function() {
oTable = $('#example').DataTable( {
"paging": false
} );
$('.btn').click( function () {
oTable.paging= false;
oTable.fnDraw();
});
} );
try this:(but i don't guarantee, because, i haven't tested)
var oTable = $('#example').dataTable();
// get settings object after table is initialized
var oSettings = oTable.fnSettings();
oSettings.paging = false;
$(".button").click(function(){
oSettings.paging = !oSettings.paging;
});
https://www.datatables.net/forums/discussion/16373/enable-disable-features-after-initializing-the-table
I'm aware there's a similar question on here JQuery DataTables: How to show/hide row details with multiple tables? but that doesn't apply to my current problem completely.
I have the code:
var oTable = $('.dataTable').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0,3,4 ] },
{ "bVisible": false, "aTargets": [ 4 ] }
],
"aoColumns": [
null,
null,
null,
null,
{ "sType": "html" }
],
"aaSorting": [[1, 'asc']],
"bFilter": false,
"bPaginate": false,
"fnInitComplete": function(oSettings) {
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('.dataTable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if (oTable.fnIsOpen(nTr)) {
// This row is already open - close it
this.src = "css/images/details_open.png";
oTable.fnClose(nTr);
} else {
// Open this row
this.src = "css/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
} );
}
});
That works if there's only one if I add the dataTable class to a second table, then they work as datatables but the show/hide buttons fail in both tables. Both tables have the same count of fields and content, just for the sake of making it work, but still no success.
On the similar post, the person suggests adding:
tbl = $(this).parent().parent().dataTable();
to the click function but I have tried that and it didn't work.
What am I missing??
In short: get rid of the fnInitComplete, and move the "live" call to below the dataTable call.
As an example, if you have three tables, after each table is completed, your current code will execute the fnInitComplete method - so fnInitComplete gets called 3 times. Your fnInitComplete uses a selector to "live" the click event to an img, and the selector will "live" to all tables. This results in multiple bindings. See this jsfiddle, http://jsfiddle.net/KeVwJ/, which duplicates your method. (Note that I'm not using images so only capturing click on the td cell, not an image).
var oTable = $('.dataTable').dataTable( {
"bFilter": false,
"bPaginate": false,
"fnInitComplete": function(oSettings) {
$('.dataTable tbody td').live('click', function () {
var nTr = this.parentNode;
alert(nTr);
} );
}
});
If you click on any row in the table, you will get 3 alert boxes, because 3 tables are created and they each "live" click for all tables at fnInitComplete.
To fix, remove the fnInitComplete, and put the code for "live" after the call to dataTable. That should solve it. See this jsfiddle: http://jsfiddle.net/rgMNu/ Click on any row in the table and it will identify the correct table class. Again since I am capturing the click on td, I only have to do this.parentNode.parentNode.parentNode. I think you'll have to do another level.
$('.dataTable tbody td').live('click', function ()
{
var t = this.parentNode.parentNode.parentNode;
alert(jQuery(t).attr('class'));
} );
I use jquery ajax. I have created function: getDatalist ();
This function displays a table with data. I use this function on multiple places on your page. When you make a change in one table, I would like to see change in others. How to rebind all the tables? Is it a trick?
Thank you very much.
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$(dataid).html(data);
});
},
if you have all table ids or classes you can use each.
var ids = ["id1", "id2", "id3"]
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$.each(ids,function(index, value){
$("#"+value).html(data);
})
// or u can give same class name table then find and re insert them.
//for same class usage
//$(".commonTable").each(function(){
//$(this).html(data);
//})
});
}