We Keep Coding

click event in js datatables (broken with paging)

I want to have a button with js click in each datatable row, but my code is broken by datatables paging system - default datatable option. Click works only on first datatable page. My only idea is to disable paging and create scrolable datatable, but I would prefer to keep paging for better UX.
Example datatable:
<table id="data_tables">
<thead>
<tr>
<td>Action</td>
<td>Name</td>
<td>Surname</td>
<tr>
</thead>
<tbody>
<!-- Datarow 1 -->
<tr>
<td><input type='button' class='my_button' data-id='1' value='click' /></td>
<td>John</td>
<td>Wayne</td>
</tr>
<!-- Datarow 2 -->
<tr>
<td><input type='button' class='my_button' data-id='2' value='click' /></td>
<td>Clark</td>
<td>Kent</td>
</tr>
</tbody>
</table>
Click event handler
//simple on() in jquery would do the trick in normal <table>
$( ".my_button" ).on( "click", function() {
var id = $(this).attr("data-id");
alert(id);
});
Is there a way to workaround this problem? Or maybe datatable api solution?

You can do something like this:
$("#data_tables").on("click", ".my_button", function() {
var id = $(this).data("id");
alert(id);
});

how to write below jquery code in angularjs

I have a requirement to make select/deselect all checkbox in a table using angularjs. I googled it but in all solutions they are using array and ng-repeat in angularjs. I cant use those solution bcz i am retrieving records from database and printing in a table with checkbox on each row.
I got a solution in jquery but i dont know to convert it to angularjs.
Below is the html table with jsp.
<thead>
<tr class="active">
<th><input type="checkbox" id="selectall">Select_All</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<% ParametersIterator it=res.getIterator();
String prod="";
int i=0;
while(it.hasNext())
{
Parameters p=it.next();
prod=p.get("product");
String id=p.get("id");
%>
<tr>
<td>
<input type="checkbox" class="case" name="case" value="<%=id%>">
</td>
<td><%=prod%></td>
</tr>
<%}%>
</tbody>
below is the Jquery code
<script language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");alert("t");
} else {
$("#selectall").removeAttr("checked");alert("f");
}
});
});
</script>
Pls help me in converting to angularjs

Here is a plunker demonstrating a table with checkboxes, populated with data loaded from a 'server/database', with buttons to select/deselect all checkboxes. There's really no reason not to use ng-repeat with this.
HTML:
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="row in data">
<td>{{row.key}}</td>
<td><input type="checkbox" ng-model="row.value"></td>
</tr>
</table>
<button ng-click="applyValues(true)">Select all</button>
<button ng-click="applyValues(false)">Unselect all</button>
JS:
$http.get('data.json')
.then(function(res) {
$scope.data = res.data;
})
$scope.applyValues = function(val) {
angular.forEach($scope.data, function(row) {
row.value = val;
})
}
https://plnkr.co/edit/oaDnx1kM2Zl6mtZG5Eis?p=preview
Version with a single 'Toggle all' button:
https://plnkr.co/edit/jsQuACzGSlPBok1LEPLF?p=preview

If you can get your data via $http.get('data.json') as Fissio suggested, that's definitely the way to go. However, if you need to render the page on the server, it can still be done.
Here is a plunker example without ng-repeat.

Using Javascript, how can I show a <tr> on top of another <tr> on hover, hiding the second <tr>?

JSFiddle: http://jsfiddle.net/9u8tnh97/
I'm using jQuery and Bootstrap. I have a table with 4 <tr> elements like this:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="hover-data">
<td>Mark</td>
<td>Otto</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link1</td>
</tr>
<tr class="hover-data">
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link2</td>
</tr>
</tbody>
</table>
And this is my Javascript:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().show();
$(this).hide();
} else {
$(this).prev().show();
$(this).hide();
}
});
At first, I'm hiding the two rows with class table-hover by giving them a hide class and I'm only showing the ones with class table-data.
What I want to achieve: When I hover a tr with class table-data, I want the next and immediate tr with class table-hover to show and the "hovered tr" to hide.
When I move the mouse outside again I want everything to be restored and only see the tr with class hover-data
Not sure why my code won't work. Any ideas?

This one uses mouseenter on the original rows and mouseleave on the new rows.
$('table tbody').on('mouseenter', 'tr.hover-data', function () {
$(this).next().show();
$(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
$(this).prev().show();).hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/15/
I noticed that the bootstrap hide class is a little too "strong" and overrides show() so I also changed those to style="display: none" for now. Instead use your own class e.g. hideme in the following example: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/
I am using delegated events (out of habit, and so they can share a common selector), but two separate "normal" (static) selectors will likely work just fine too. e.g. http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/

Like this:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().toggleClass('hidden');
}
});
https://jsfiddle.net/gqyrpnes/

Getting unknown child div from parent?

<script type="text/javascript">
$(".inventory-notes").bind("click", function() {
if($(this).text().length > 0) {
alert($(this).text());
alert($(this).closest(".inventory-notes").children().text());
}
});
</script>
example table
<table id="inventory" class="table">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Usage</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr class="items">
<td>Hatchet</td>
<td>24,000 Gold</td>
<td>Woodcutting</td>
<td><div class="inventory-notes"><div id="299"><img src="addnotes.png"></div></div></td>
</tr>
</tbody>
</table>
How can I get the value 299 from the child div of inventory-notes? The table really contains at least 1,000 rows of items each containing a random ID.
I am using jQuery 1.6.2 so I cannot use the .on() function.

Since you're using jQuery 1.6.2, I'd use .delegate:
$("#inventory").delegate(".inventory-notes", "click", function(){
var id = $(this).find("div").prop("id");
});
Since you're going to have 1,000+ rows, you don't want to bind the event to the actual rows, resulting in 1,000+ handlers.

On button click, validate that atleast a row must be moved to a custom table with Jquery

I am using MVC3, EF Model first on my project.
I have a view with 4 tables and then I have a CustomPickedTable, whenever a user click on a row inside those 4 tables that row moves to CustomPickedTable Table this is the code for it:
<script type="text/javascript">
$(function () {
$('.questionsForSubjectType tbody tr').click(function () {
var origin = $(this).closest('table').attr('id');
$(this)
.appendTo('#CustomPickedTable tbody')
.click({ origin: origin }, function (evt) {
$(this).appendTo('#' + evt.data.origin);
});
});
});
</script>
What I am looking for is some kind of validation that when a user clicks on the submit button there should be a rule that make sures that atleast one row in each of those 4 tables must be moved to CustomPickedTable if not it should not post the form but give the user an errormessage.
This is one of my 4 tables, these get generated by a foreach loop with razor in MVC
<div class="questionsForSubjectType" id="questionsForSubjectType_1">
<table class="box-style2" id="RandomID_c5b9bc7a-2a51-4fe5-bd3a-75b4b3934ade">
<thead>
<tr>
<th>
Kompetens
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-question-id="16">Har konsulten Förmåga att lära sig nytt?</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-question-id="17">Har konsulten rätt kompetens?</td>
</tr>
</tbody>
</table>
</div>
My custom table:
<table id="CustomPickedTable" class="box-style2">
<thead><tr><th>Choosen Questions</th></tr></thead>
<tbody>
</tbody>
</table>
Thanks in advance!

There might be a better way.
But i would add a data-attribute or some class to each of the TD's you can move, and on submit check for each required value.
Created an example here: http://jsfiddle.net/y35Qf/1/
Basicly i added an attribute called data-row, and each table has its own value, on submit i require each of these values to be in the CustomPickedTable - if not i alert that something is missing - else alert success.
You could easily add so you alert which rows are misssing or any other validation you would want.
Is this what you wanted?