Individual Column Search In DataTables Not Working - html

I have a table that I'm trying to implement individual column search on using jQuery DataTables. The API that describes how to do this is here: https://datatables.net/examples/api/multi_filter.html which is what I used when attempting to implement this. I'm also using a global search function, which allows me to search across all tables. As far as I can see, the conflict comes in between using
var table = $(".datatable").dataTable();
versus
var table = $(".datatable").DataTable();
because they return two different things (this is described in the following answer given to a related question --> dataTable() vs. DataTable() - why is there a difference and how do I make them work together? after reading this, I tried using the solution like so:
table.api().columns().eq(0).each(function(colIdx) {
but sadly this didn't make the feature work. The table appears just fine along with the searchboxes at the bottom of each column, and the global search works perfectly. If you could spot something I might be doing wrong or give any advice it would be much appreciated. The complete script is as follows:
script.
$(document).ready(function() {
$('.datatable').DataTable({
});
// THIS IS THE GLOBAL SEARCH CODE
$.fn.dataTableExt.oApi.fnFilterAll=function(oSettings,sInput,iColumn,bRegex,bSmart){
var settings = $.fn.dataTableSettings;
for (var i = 0; i < settings.length; i++) {
settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
}
};
var table = $(".datatable").dataTable();
$("#Search_All").keyup(function () {
// Filter on the column (the index) of this element
table.fnFilterAll(this.value);
});
// THIS IS THE INDIVIDUAL COLUMN SEARCH
$('.datatable tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
table.api().columns().eq(0).each(function(colIdx) {
var that = this;
$('input', this.footer()).on('keyup change', function(){
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
})
});
});
Thanks for your time!

Related

HTML Use Current page end of URL in target url

long time reader, first time submitter
It looks like i have the ability to insert javascript or HTML in this custom code box, but If it can be done using hTML that would be preferred.
I am trying to get the last string 'Variablex1x' which is dynamic based on the page being viewed. It is a unique identifier that corresponds to records on a different site. I would like to 'grab' that identifier and post it on the end of the target URL. When the user clicks the 'targetdomain.com' url, they are taken to the page of the targetdomain.com/Variablex1x
https://currentdomain.com/portal/x/mycase/Variablex1x
https://Targetdomain.com/Variablex1x
You can try something like this:
$( "#target" ).click(function() {
var Variablex1x;
var newUrl;
Variablex1x = getQueryVariable(nameofvariable)
if(Variablex1x != false){
window.location.href = newurl + "/" + Variablex1x; + "/" + Variablex1x;
}
else{
window.location.href = newurl;
}
});
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
getQueryVariable comes from
https://css-tricks.com/snippets/javascript/get-url-variables/ and will work as long as you know what variable you're looking for.
The idea is when you click on the link instead of actually navigating you'll fire the click function, so you'll need to update the target id. The click function will figure out if you have parameters or not, if you do it will append them to the URL and navigate, if not it will just navigate.
This is not a perfect solution but it should get you started.
IF you don't know what parameters you're looking for here is an answer of how to get those parameters: How can I get query string values in JavaScript?

Kendo hierarchy grid -- get count of child rows on selecting master row

I think this is probably pretty simple, but I need pointing in the right direction.
I've got a master/child grid and I'd simply like to be able to get a count of child rows when selecting (or various other actions, e.g. save or edit ) the master row.
Thanks
I created a fiddle and played around a bit. It's not always working, e.g. when you haven't got the details grid yet or when opening a detail row for the first time, but it should give you an idea on how get the cound of a hierarchical grid.
Fiddle: http://jsfiddle.net/9BGpr/
Open console to get output.
Main code is here:
selectable: 'row',
change: function (e) {
var kendoGrid = this;
setTimeout(function () {
console.log("e", e)
var $selectedRow = kendoGrid.select();
if ($selectedRow.length != 1) {
console.log("Please select a single row!");
return false;
}
if ($selectedRow.hasClass('k-master-row')) {
var $detailRow = $selectedRow.next().filter('.k-detail-row');
if ($detailRow.length === 0) {
console.log("Could not find detail row!");
return false;
}
var $detailGrid = $detailRow.find('.k-grid');
if ($detailGrid.length === 0) {
console.log("Could not find grid in detail row!");
return false;
}
var kendoGridDetails = $detailGrid.getKendoGrid();
console.log("Total of records in detail grid: " + kendoGridDetails.dataSource.total());
}
});

Repeatedly Grab DOM in Chrome Extension

I'm trying to teach myself how to write Chrome extensions and ran into a snag when I realized that my jQuery was breaking because it was getting information from the extension page itself and not the tab's current page like I had expected.
Quick summary, my sample extension will refresh the page every x seconds, look at the contents/DOM, and then do some stuff with it. The first and last parts are fine, but getting the DOM from the page that I'm on has proven very difficult, and the documentation hasn't been terribly helpful for me.
You can see the code that I have so far at these links:
Current manifest
Current js script
Current popup.html
If I want to have the ability to grab the DOM on each cycle of my setInterval call, what more needs to be done? I know that, for example, I'll need to have a content script. But do I also need to specify a background page in my manifest? Where do I need to call the content script within my extension? What's the easiest/best way to have it communicate with my current js file on each reload? Will my content script also be expecting me to use jQuery?
I know that these questions are basic and will seem trivial to me in retrospect, but they've really been a headache trying to explore completely on my own. Thanks in advance.
In order to access the web-pages DOM you'll need to programmatically inject some code into it (using chrome.tabs.executeScript()).
That said, although it is possible to grab the DOM as a string, pass it back to your popup, load it into a new element and look for what ever you want, this is a really bad approach (for various reasons).
The best option (in terms of efficiency and accuracy) is to do the processing in web-page itself and then pass just the results back to the popup. Note that in order to be able to inject code into a web-page, you have to include the corresponding host match pattern in your permissions property in manifest.
What I describe above can be achieved like this:
editorMarket.js
var refresherID = 0;
var currentID = 0;
$(document).ready(function(){
$('.start-button').click(function(){
oldGroupedHTML = null;
oldIndividualHTML = null;
chrome.tabs.query({ active: true }, function(tabs) {
if (tabs.length === 0) {
return;
}
currentID = tabs[0].id;
refresherID = setInterval(function() {
chrome.tabs.reload(currentID, { bypassCache: true }, function() {
chrome.tabs.executeScript(currentID, {
file: 'content.js',
runAt: 'document_idle',
allFrames: false
}, function(results) {
if (chrome.runtime.lastError) {
alert('ERROR:\n' + chrome.runtime.lastError.message);
return;
} else if (results.length === 0) {
alert('ERROR: No results !');
return;
}
var nIndyJobs = results[0].nIndyJobs;
var nGroupJobs = results[0].nGroupJobs;
$('.lt').text('Indy: ' + nIndyJobs + '; '
+ 'Grouped: ' + nGroupJobs);
});
});
}, 5000);
});
});
$('.stop-button').click(function(){
clearInterval(refresherID);
});
});
content.js:
(function() {
function getNumberOfIndividualJobs() {...}
function getNumberOfGroupedJobs() {...}
function comparator(grouped, individual) {
var IndyJobs = getNumberOfIndividualJobs();
var GroupJobs = getNumberOfGroupedJobs();
nIndyJobs = IndyJobs[1];
nGroupJobs = GroupJobs[1];
console.log(GroupJobs);
return {
nIndyJobs: nIndyJobs,
nGroupJobs: nGroupJobs
};
}
var currentGroupedHTML = $(".grouped_jobs").html();
var currentIndividualHTML = $(".individual_jobs").html();
var result = comparator(currentGroupedHTML, currentIndividualHTML);
return result;
})();

Twitter Bootstrap Row Filter / Search Box

I'm having trouble finding a tutorial on how to create a simple search query, or row filter, for Twitter Bootstrap. I've tried many, I'm not sure if I'm doing something wrong or the plugins are not compatible with Bootstrap. Please help if you can.
I've tried:
$(document).ready(function() {
//Declare the custom selector 'containsIgnoreCase'.
$.expr[':'].containsIgnoreCase = function(n,i,m){
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#search").keyup(function(){
$("#tabela").find("tr").hide();
var data = this.value.split(" ");
var jo = $("#tabela").find("tr");
$.each(data, function(i, v){
//Use the new containsIgnoreCase function instead
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});
jo.show();
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
Nothing with this... Maybe I'm missing any "id" on my table or search box, I'm new with this.
Here's what I use:
$('input.filter').live('keyup', function() {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function() {
return rex.test($(this).text());
}).show();
});
To use it, you just create a table, with a tbody with the class "searchable" and then an input with class "filter" somewhere on your page (I prefer to put them in a Bootstrap Popup behind a search icon).
This is live example of solution provided by Filipp Lepalaan. Many thanks for this small and perfect code.
Example
$(document).ready(function () {
(function ($) {
$('#filter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});

Mootools reuse same function on multiple instances with something like the each function

I'm using the mootools wall plugin, Its working well in my application, however if I add multiple (image) walls it only works for one wall ::: My understanding of scripting is not good enough to add a each function or similar :::
I need to "bind" the code below to say 2 divs like this :::
My First wall:
<div id="viewport">
<div id="wall">
Second wall:
<div id="viewport">
<div id="wall_02">
Any assistance would be appreciated.
var wallIMAGES = new Wall( "wall", {
"width": scArray[1],
"height": scArray[1],
callOnUpdate: function(items){
items.each(function(e, i){
var el = wall[counterFluid];
if (el) {
var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el));
a.inject(e.node).set("opacity", 0).fade("in");
e.node.store("tubeObject", el);
}
counterFluid++;
// Reset counter
if( counterFluid >= scArray[10].length) counterFluid = 0;
})
}
});
wallIMAGES.initWall();
Maybe something like this:
var my_wall_ids = ['wall', 'wall_02'];
var myWalls = [];
var baseWallOptions = {
"width": scArray[1],
"height": scArray[1],
callOnUpdate: function(items){
items.each(function(e, i){
var el = wall[counterFluid];
if (el) {
var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el));
a.inject(e.node).set("opacity", 0).fade("in");
e.node.store("tubeObject", el);
}
counterFluid++;
// Reset counter
if( counterFluid >= scArray[10].length) {counterFluid = 0;}
}); // end items.each
}
}
for (var i=0;i<my_wall_ids.length;i++){
var id = my_wall_ids[i];
var wallOptions = baseWallOptions;
// if your customization was something like changing
// the height , but only on the 'wall' element
if (id === 'wall') {
wallOptions.height = 400;
}
myWalls[i] = new Wall(id, wallOptions);
myWalls[i].initWall();
}
If you read Wall's documentation, you'll notice that, just like most other classes, the first argument it takes is an element id.
So, if your initialization code states
new Wall("wall", { …
…then it will be applied to the element that has the id "wall".
You could simply duplicate your code and use one with "wall", the other one with "wall_02". However, that would be bad practice. Indeed, if you later wanted to change some options, you'd have to do it in two distinct blocks, and they would probably get out of sync.
If your only difference lies in the target id, and the options are to be shared, simply store the options object (second parameter to the Wall class) in a variable and use it twice! That is:
var wallOptions = { width: … };
var wallImages = new Wall("wall", wallOptions),
wallImages2 = new Wall("wall_02", wallOptions);
wallImages.initWall();
wallImages2.initWall();
It could be even better to embed initalization in a function, but this solution is probably the easiest if you simply want to have two Wall instances without learning much more about JS.