I am using this lib: https://github.com/Dynamitable/Dynamitable
It's pretty nice, and it works perfectly for me, for now.
When I'm trying to filter it (like filter "name" when I'm typing "abc" on the input field) all rows are dissapearing in order to show me every "name" rown which contains "abc. So this is nice !
My problem is, I'm using a very big table, and the filter works "too" good for me. I mean, I can't type my entire "research" before it start working.
So, my question is, is it possible to add a "delay", in order to let people type some letter before starting filtering ? Something like 0.5 sec or even 1 sec ?
I had try to play with this on line 150/153, but no success :
$(selector).on('change keyup keydown', filterAction);
// initialization
filterAction();
My proposal is to disconnect the original filters and add your own filter with the capability to start the filtering only after n char.
In the following an example:
$('.js-dynamitable .js-filter').off('change keyup keydown').on('change keyup keydown', function (e) {
//
// start filtering on text input only after 2 chars
//
if ($(this).is(':text') && $(this).val().length < 2) {
return; // stop filtering
}
var index = $(this).closest('tr').children('td, th').index($(this).closest('td, th'));
var dynamitable = $('.js-dynamitable').dynamitable();
dynamitable.displayAll();
$(dynamitable).find('.js-filter').each(function () {
var $this = $(this);
dynamitable.filter(index, $this.val());
});
});
.glyphicon {
cursor: pointer;
}
input, select {
width: 100%;
}
.second, .glyphicon-chevron-down, .glyphicon-chevron-up {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://rawgit.com/Dynamitable/Dynamitable/master/dynamitable.jquery.js"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
<h1><span class="first">Dynami</span><span class="second">table</span></h1>
<div class="table-responsive">
<table class="js-dynamitable table table-bordered">
<thead>
<tr>
<th>Name
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Email
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Age
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Account
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Scoring
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
</tr>
<tr>
<th>
<input class="js-filter form-control" type="text" value="">
</th>
<th>
<select class="js-filter form-control">
<option value=""></option>
<option value="#dynamitable.com">dynamitable.com</option>
<option value="#sample.com">Sample</option>
</select>
</th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy Krueger</td>
<td>freddy.krueger#sample.com</td>
<td class="text-right">122</td>
<td class="text-right">2300$</td>
<td class="text-right">+15</td>
</tr>
<tr>
<td>Clint Eastwood</td>
<td>clint.eastwood#sample.com</td>
<td class="text-right">62</td>
<td class="text-right">48 500$</td>
<td class="text-right">+12</td>
</tr>
<tr>
<td>Peter Parker</td>
<td>peter.parker#dynamitable.com</td>
<td class="text-right">22</td>
<td class="text-right">210$</td>
<td class="text-right">-5</td>
</tr>
<tr>
<td>Bruce Wayne</td>
<td>bruce.wayne#dynamitable.com</td>
<td class="text-right">42</td>
<td class="text-right">-8500$</td>
<td class="text-right">+2</td>
</tr>
<tr>
<td>Jackie Chan</td>
<td>jackie.chan#sample.com</td>
<td class="text-right">32</td>
<td class="text-right">-250.55$</td>
<td class="text-right">0</td>
</tr>
<tr>
<td>Bruce Lee</td>
<td>bruce.lee#sample.com</td>
<td class="text-right">32</td>
<td class="text-right">510$</td>
<td class="text-right">-7</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
Using jQuery, how can I do the following when clicking the edit icon in the third column:
Change the text in the adjacent second column to an input box
Change the icon class in the third column to a save button
Change the original text in the second column to what was entered into the input box
(Sorry if that's confusing and/or a lot to ask!)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
<form>
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody align="left">
<tr>
<th scope="row" id="modalLinkName">Link 1</td>
<td>
<a id="modalLinkURL">https://www.link1.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 2</td>
<td>
<a id="modalLinkURL">https://www.link2.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 3</td>
<td>
<a id="modalLinkURL">https://www.link3.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
First there are a few issues to fix in your HTML:
id attribute values must be unique in HTML. Use class names instead for where you currently have duplicates.
you have <th> opening tags that are closed with </td>
With those changes, you could use this click handler:
$(".modalEditLink").click(function () {
if ($(this).find(".fa-pen").length) { // edit operation:
var $a = $(this).closest("tr").find(".modalLinkURL");
var $inp = $("<input>").addClass("editURL").val($a.text());
$a.replaceWith($inp);
$inp.focus();
$(this).find(".fas").removeClass("fa-pen").addClass("fa-save");
} else { // save operation:
var $inp = $(this).closest("tr").find(".editURL");
var $a = $("<a>").addClass("modalLinkURL").text($inp.val());
$inp.replaceWith($a);
$(this).find(".fas").removeClass("fa-save").addClass("fa-pen");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td scope="row" class="modalLinkName">Link 1</td>
<td>
<a class="modalLinkURL">https://www.link1.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 2</td>
<td>
<a class="modalLinkURL">https://www.link2.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 3</td>
<td>
<a class="modalLinkURL">https://www.link3.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
I am using these to make clickable link row but I don't want to include the checkbox because I am using checkbox to filter another action.
Is it possible to except checkbox on the row?
How to prevent click handler for a specific target
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
window.document.location = $(this).data("href");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table_adj table-checkable txt-col mar_bot_10">
<thead>
<tr>
<th>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input class="mail-group-checkbox" type="checkbox" value="movetofilter"> <span></span>
</label>
</th>
<th>a</th>
<th><span data-placement="bottom" data-toggle="tooltip" title="Added Reference">b</span>
</th>
<th>c</th>
<th>d</th>
<th><span data-placement="bottom" data-toggle="tooltip" title="Received Message">e</span>
</th>
<th><span data-placement="bottom" data-toggle="tooltip" title="Received Date">f</span>
</th>
<th>g</th>
<th>h</th>
<th class="text-right">i</th>
</tr>
</thead>
<tbody>
<tr class='clickable-row' data-href='http://stackoverflow.com'>
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input class="mail-group-checkbox" type="checkbox" value="movetofilter"> <span></span>
</label>
</td>
<td>1
</td>
<td class="text70px">1</td>
<td class="text170px">1</td>
<td>212</td>
<td class="text40px">23</td>
<td class="text70px">2</td>
<td class="text40px">4</td>
<td class="text70px">5</td>
<td class="text70px text-right">6</td>
</tr>
You can verify what element was clicked using event.target.
$(".clickable-row").click(function(event) {
// Check if target is NOT inside '.mt-checkbox'
if(!$(event.target).closest('.mt-checkbox').length){
window.document.location = $(this).data("href");
}
});
I'm trying to sort data in jQuery by a specific attribute like following:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
#foreach (var item in ViewBag.rezultati)
{
<tr class="test" sale=#item.SaleNumber feedback=#item.Feedback>
<td>
#item.StoreName
</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="#item.StoreName" data-original-title="Analyze competitor">
<i class="fa fa-bar-chart-o"></i>
</button>
</td>
<td>
<b>
#item.SaleNumber
</b>
</td>
<td><b>#item.Feedback</b></td>
</tr>
}
</tbody>
</table>
And this is the code I'm currently using to sort the data, but it doesn't works as I want it to:
$(".feedbackClick").click(function () {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function (a, b) {
return +a.feedback - +b.feedback;
})
.appendTo($wrapper);
});
This just sorts 1 item in the whole table (or something, I'm not really sure?)
Can someone help me out with this?
Edit: Here is the rendered tr tag:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
<h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title">
<h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title">
<h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" sale="0" feedback="349">
<td>kansascitykittygirl</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td>
<b>0</b>
</td>
<td><b>349</b></td>
</tr>
<tr class="test" sale="10" feedback="14250">
<td>fancaveidaho</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td><b>10</b></td>
<td><b>14250</b></td>
</tr>
</tbody>
</table>
The problem is a.feedback and b.feedback are not getting feedback attribute's value. You can use $(a).attr('feedback') and $(b).attr('feedback') instead like following.
$(".feedbackClick").click(function() {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
Title
</th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" feedback="1">
<td>1111</td>
</tr>
<tr class="test" feedback="3">
<td>3333</td>
</tr>
<tr class="test" feedback="2">
<td>2222</td>
</tr>
</tbody>
</table>
<button class="feedbackClick">Sort</button>
Now I have to click on subscribe button and get the value of the plan name that is either Platinum or Gold.
HTML:
<div role="tabpanel" class="tab-pane active col-md-9" id="home">
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
<tr>
<th style="background: #60D760;">
<h3 class="Plan">Platinum</h3>
<p>AGENCIES & MARKETING TEAMS</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$299</p>
<span>per month</span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="btn btn-success pricing-button">Subscribe</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan">
<tr>
<th style="background: #22D3FF;">
<h3 class="Plan">Gold</h3>
<p>CONSULTANTS & SMALL BUSINESSES</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$199</p>
<span>per month</span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="btn btn-info pricing-button">Subscribe</span>
</td>
</tr>
</table>
</div>
</div>
jQuery:
$(function() {
$(".pricing-button").click(function() {
alert($(this).find('.Pricing-Plan Plan').text());
//$('.Plan').val(function () {
// $(this).text();
//});
});
});
I need to get price and plan name on Subscribe button click, I hope someone help me out with this.
You can get it by slightly modifying your code to:
$(".pricing-button").click(function() {
alert($(this).parents('table').find('.Plan').html());
});
DEMO
OR
You can add custom attribute data-plan="Plantinum/Gold" to your pricing button as:
<span class="btn btn-info pricing-button" data-plan="Gold">Subscribe</span>
And get attribute value as following:
$(".pricing-button").click(function () {
alert($(this).attr('data-plan'));
});
DEMO
This will work.
$(function () {
$(".pricing-button").click(function () {
alert($(this).closest('.Pricing-Plan').find('.Plan').text());
});
});
Try to this way .
Used to this
$(this).parents('table').find('.Plan').html();
Demo
$(function () {
$(".pricing-button").click(function () {
var htmlString =$(this).parents('table').find('.Plan').html();
alert( htmlString );
//$('.Plan').val(function () {
// $(this).text();
//});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane active col-md-9" id="home">
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
<tr>
<th style="background: #60D760;">
<h3 class="Plan">Platinum</h3>
<p>
AGENCIES & MARKETING
<br />
TEAMS
</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$299</p>
<span>per month</span>
</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="btn btn-success pricing-button">Subscribe</span></td>
</tr>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan">
<tr>
<th style="background: #22D3FF;">
<h3 class="Plan">Gold</h3>
<p>CONSULTANTS & SMALL BUSINESSES</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$199</p>
<span>per month</span>
</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="btn btn-info pricing-button">Subscribe</span></td>
</tr>
</table>
</div>
</div>
You can do like following way to get price and package name.
HTML:
<span class="btn btn-success pricing-button" onClick="$(this).MessageBox('platinum','$299');">Subscribe</span>
<span class="btn btn-info pricing-button" onClick="$(this).MessageBox('gold','$199');">Subscribe</span>
JQuery:
$.fn.MessageBox = function(package,price) {
alert(package + " has price " + price);
};
Working Fiddle
This will work
$(".pricing-button").click(function () {
alert($(this).closest('.col-sm-4').find('.Plan').text());
});
When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?
JS Fiddle
HTML code:
<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Update
I tried this CSS:
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
It doesn't work, unfortunately.
Remove the class "table-hover" from the table tag.
http://jsfiddle.net/ozr598jb/6/
You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
background-color: inherit;
}
Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.
Demo: http://jsfiddle.net/ozr598jb/3/