I'm using the script below to filter though results in a table. Only the problem is that it is case sensitive. How would I go about making it non-case sensitive?
<script>
$(document).ready(function() {
$("#searchInput").keyup(function(){
//hide all the rows
$("#fbody").find("tr").hide();
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
//Recusively filter the jquery object to get results.
$.each(data, function(i, v){
jo = jo.filter("*:contains('"+v+"')");
});
//show the rows that match.
jo.show();
//Removes the placeholder text
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
</script>
http://jsfiddle.net/baeXs/ and http://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/ will help you out
$.expr[":"].containsNoCase = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Can do somthing like this with filter():
$.each(data, function (i, v) {
v = v.toLowerCase();
jo.filter(function () {
var txt = $(this).text().toLowerCase();
return txt.indexOf(v) > -1;
}).show();
})
I'd probably change the filter:
$.each(data, function(i, v) {
jo = jo.filter(function() {
return $(this).text().toLowerCase().indexOf(v.toLowerCase()) > -1;
});
});
$(document).ready(function() {
$("#searchInput").keyup(function(){
//hide all the rows
$("#fbody").find("tr").hide();
//split the current value of searchInput
var data = this.value.toLowerCase().split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
//Recusively filter the jquery object to get results.
$.each(data, function(i, v){
jo = jo.filter("*:contains('"+v.toLowerCase()+"')");
});
//show the rows that match.
jo.show();
//Removes the placeholder text
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
Related
I created an ejs file that can display the documents in the mongodb db collection into the table, and I added select:option that can filtered the table. for example, select:option of date I choose 05/28/2019 it will only display data with 05/28/2019 date. and I already have a download form that can download the table, However the download button only download the whole data in the table and cannot download the filtered data. My question is if there is a way that once I filtered the data in the table and I click download it will only download the filtered data not the whole table. Please see the sample code here https://jsfiddle.net/indefinite/b63y928L/9/
this is the code that can filter the table
$(document).ready(function () {
$('.filter').change(function () {
var values = [];
$('.filter').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push( {
text: $(this).text(),
colId : colIdx
});
});
});
filter('table > tbody > tr', values);
});
function filter(selector, values) {console.log(values);
$(selector).each(function () {
var sel = $(this);
var tokens = sel.text().trim().split('\n');
var toknesObj = [], i;
for(i=0;i<tokens.length;i++){
toknesObj[i] = {
text:tokens[i].trim(),
found:false
};
}
var show = false;
//console.log(toknesObj);
$.each(values, function (i, val) {
if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
toknesObj[val.colId].found = true;
}
});
console.log(toknesObj);
var count = 0;
$.each(toknesObj, function (i, val) {
if (val.found){
count+=1;
}
});
show = (count === values.length);
show ? sel.show() : sel.hide();
});
}
and this is what I followed on how to download the html table to csv file https://codepen.io/malahovks/pen/gLxLWX?editors=1010
I expect that once I select a date it will only download the data in the date that I selected. Thank you!
You can modify the row selector to select only visible rows. var rows = $("table tr:visible");. Since you are already using jquery library, you can use the jquery selector.
function export_table_to_csv(html, filename) {
var csv = [];
//var rows = document.querySelectorAll("table tr:visible");
var rows = $("table tr:visible");
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
// Download CSV
download_csv(csv.join("\n"), filename);
}
See the updated fiddle https://jsfiddle.net/165yj7se/
I have a PHP page and a table where I fill it up with data from the database. I have a search field on top of the table where I would like to filter rows as I am typing.
Here is my Javascript
$('#system-search').keyup( function()
{
var that = this;
// affect all table rows on in systems table
var tableBody = $('.table table-filter tbody');
var tableRowsClass = $('.table table-filter tbody tr');
$('.search-sf').remove();
tableRowsClass.each( function(i, val)
{
//Lower text for case insensitive
var rowText = $(val).text().toLowerCase();
var inputText = $(that).val().toLowerCase();
if(inputText != '')
{
$('.search-query-sf').remove();
tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
+ $(that).val()
+ '"</strong></td></tr>');
}
else
{
$('.search-query-sf').remove();
}
if( rowText.indexOf( inputText ) == -1 )
{
//hide rows
tableRowsClass.eq(i).hide();
}
else
{
$('.search-sf').remove();
tableRowsClass.eq(i).show();
}
});
//all tr elements are hidden
if(tableRowsClass.children(':visible').length == 0)
{
tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
}
});
Sorry for the bad code and formatting I can't seem to understand how to format it properly..
https://stackoverflow.com/a/19696936/1406155
You are using a bit too much code for that. First place an input field like this
<input type="text" id="search" placeholder="Search">
and use the below function for search
$("#search").keyup(function () {
var value = this.value.toLowerCase().trim();
$("table tr").each(function (index) {
if (!index) return;
$(this).find("td").each(function () {
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
I have created a table but somehow now able to filter the row. Its giving me error as cannot read property split. Here is the link to my fiddle file. Any help would be great. Thanks in advance.
$("#crudtable_filter").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#crudtable").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
Working fiddle: http://jsfiddle.net/sofqjbrg/3/
Explanation:
In order to get the value of the element that rigger the event, you need to use $(event.target).val().
For the difference between $(event.target) and $(this), please refer to Difference between $(this) and event.target?
PS: Your focus event is registered to the wrong element.
Ok, so I'm new and I'm beating my head against the wall!
First here's my fiddle: http://jsfiddle.net/fiddle_me_this/kN272/30/
And the code to boot:
var myArr = [];
var myStr = "";
var restoreList = [];
$(document).ready(function () {
//source file = https://spreadsheets.google.com/feeds/list/17T3iZRygAry052J4clYoVnBUz1h_2ZttBY1mDBh7ZEs/od6/public/basic?alt=json-in-script&callback=?
if (restoreList.length === 0) {
$(function listPlayers() {
$.getJSON("https://spreadsheets.google.com/feeds/list/17T3iZRygAry052J4clYoVnBUz1h_2ZttBY1mDBh7ZEs/od6/public/values?alt=json-in-script&callback=?",
function (data) {
$.each(data.feed.entry, function (i, entry) {
myStr = entry.gsx$player.$t;
myArr.push(myStr);
});
//store default list data
localStorage.myJSON = JSON.stringify(myArr);
});
});
} else {
$('#header').html('Data Exists');
}
});
restoreList = JSON.parse(localStorage.myJSON);
$('#header').html('Offensive Players');
//just using 10 names for now there's over 200 total
for (var i = 0; i < 10; i++) {
$('#player-list').append('<li class="player"><span class="name">' + restoreList[i] + '</span></li>');
if (i === restoreList.length - 1) {
localStorage.clear();
}
}
$('#player-list').sortable('refresh');
$('#player-list').sortable({
connectWith: "ul"
});
I am unable to take the dynamically created list, pulled from a google doc, to connectWith the corresponding list (in gray).
Any help would be appreciated!!
I wonder if this is what you want or not
http://jsfiddle.net/kN272/31/
$('#player-list , #player-list2').sortable({
connectWith: ".connected"
});
I am trying to write jason data into separate divs with class .name and data-key za data attr. I have problem with data and getting the right index for that.
Here is my buggy attempt. Console.log writes all keys, but the last function doesn't give divs the data attr
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
var names = data.map(function (i) {
return i['link'].name
});
var keys = data.map(function (i) {
return i['link']['key']
});
var container = document.querySelector(".link-names");
names.forEach(function(name) {
var div = document.createElement('div');
div.innerHTML = name;
$(div).addClass("name");
container.appendChild(div);
});
$.each((".name"), function(index) {
$(this).data("key", keys[index]);
console.log(keys[index]);
});
please try with this updated code
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
var names = data.map(function (i) {
return i['link'].name
});
var keys = data.map(function (i) {
return i['link']['key']
});
var container = document.querySelector(".link-names");
names.forEach(function(name) {
var div = document.createElement('div');
div.innerHTML = name;
$(div).addClass("name");
container.appendChild(div);
});
$(".name").each(function(index) {
$(this).data("key", keys[index]);
console.log(keys[index]);
});
You missed a $ in ('.names') $.each try this,
$.each($(".name"), function(index) {
// ----^ use $ here
$(this).data("key", keys[index]);
console.log(keys[index]);
});
or simply,
$(".name").each(function(index) {
$(this).data("key", keys[index]);
console.log(keys[index]);
});
You can add key while adding element in container like,
var i=0;
var container = document.querySelector(".link-names");
names.forEach(function(name) {
var div = document.createElement('div');
div.innerHTML = name;
$(div).addClass("name");
$(div).data("key", keys[i]);// set data here
container.appendChild(div);
i++;
});