I'm using a lazy loaded(Deferred) jQuery Datatable and trying to add multi-row selection too. However, when I click on another page of the datatable, the selected rows from the previous page was cleared.
// this is how to multi-select
$('#table tbody').on( 'click', 'tr', function()
{
$(this).toggleClass('selected');
});
Lint to deffered loading datatable: https://datatables.net/examples/server_side/defer_loading.html
Note* Instead of using the server-side processing script, I've created a php function for datatable ajax.
The result I wanted is to multi-row select the lazy loaded jQuery datatable on each pages without being cleared when navigated to another page.
Anyone experienced the same situation?
Okay, I found an answer already. There's jQuery datable callback called "createdRow". Made a conditional statement to acquire the result I needed.
Here's the link to it: https://datatables.net/reference/option/createdRow
Related
I'm developing an asp.net mvc 5 application in which, I've some textBox fields, the user will input these textbox fields, and the data will be generated in a table below those fields using javascript, when the user clicks the "Add" button one row will be added and so on, so, it is a table that is getting generated on the client side, this way :
$('#add').click(function () {
//textbox input gets pushed here in an array
//function that generates Html code of a table using javascript, Note that, id gets set here, this way :
//var $table = $("<table>");
//$table.attr("id","myTable");
//And, In the end, Datatable fucntion is called here
$('#myTable').DataTable();
});
The above code is written in the index view of the "Home", and the files that are needed to call jquery's datatable are added in the Layout.cshtml, this way :
//Before the body gets ended, these are the script files that are added
.
.
<script src="~/scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/scripts/datatables/jquery.datatables.min.js")"></script>
<script src="#Url.Content("~/scripts/datatables/datatables.bootstrap.min.js")"></script>
Now, my question is that, table html is getting generated fine but the datatable in getting called, datatable is not working, Is there anything I'm doing wrong? Any Help will be deeply appreciated, Thanks in Advance :)
In one of my projects I am using a Bootstrap table for displaying and manipulating data. I also use data-show-columns="true" in order to allow the user to show/hide needed columns in the table.
When it is used it messes up some of the styling in the table.
Is there any way that I can trigger the jQuery event or call JavaScript function when I use data-show-columns functionality of Bootstrap table?
This is a good example of a table with data-show-columns functionality. It is not my code. All I need is to somehow trigger the jQuery event on columns show/hide.
Thank you,
It should be:
$("#yourTableId").on("column-switch.bs.table", function() {
....
....
});
Say I have two different functionalities/filters (e.g. calculation and sorting) in form of plugins for a table. The user can choose which one he wants to use right now. But both together have conflicts and therefore when one is chosen, the other should be stopped/removed (without reloading the table itself). How can I achieve that?
For example I use the dataTable jQuery plugin which is initialized by
$('#myTable').dataTable();
But when the user chooses a different filter, I somehow need to 'deactivate' this plugin for the other filter to work without conflict. I tried the unbind event handler, but without success.
In general the logic would look like this:
$('.js_trigger').on('click', '.calculation' function() {
//Deactivate
$('#myTable').dataTable();
//Activate
$('#myTable').dataCalculation();
}
$('.js_trigger').on('click', '.sorting' function() {
//Deactivate
$('#myTable').dataCalculation();
//Activate
$('#myTable').dataTable();
}
I hope you get what I mean and that this question is not to broad.
Solution:
With the hint of #V31, I made use of the empty() function.
1.) On page load I put all the content from the table in a variable before any additional scripts change the table.
tableContent = $('#myTableContainer').html();
2.) When a different plugin needs to be loaded I empty the container and add the content of the variable before I execute the plugin.
$('#myTableContainer').empty();
$('#myTableContainer').html(tableContent);
$('#myTable').dataTable();
You can empty the parent div (of that element) so that the binding is removed. Something like this:
$('#myTable').empty();
I have a table on my site, whenever you click on the first checkbox, all others are selected and are also performed other actions that does not matter.
Once the site opens, these data are loaded directly on the page with PHP.
http://i.imgur.com/GRIFbzN.png
Just above, I have a 'select' field with some options, whenever you change the option, you made an ajax request that returns other data, but with the same structure in HTML with the same checkbox and others like elements.
This data is loaded into the table, but after loading the javascript events does not work anymore. How to solve this?
HTML: http://pastebin.com/jU5nZURs
Javascript: http://pastebin.com/XT1ty019
Thanks!
Events are bound to existing DOM nodes.
When you replace / remove the nodes, the events bound to them go away, too.
You need to run this again after you load new content:
$(".checkData").on( "click", countChecked );
$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
countChecked();
});
p.s.
Put it in a function so you don't duplicate code.
I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.
You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.
Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.