Is there any example out there that explains how to dynamically generate a tablesorter with the pager plugin using AJAX, with checkboxes and editable cells? Currently, all of the examples have hard-coded table data, i.e. <theader> and <tbody> are pre-defined.
I can get a basic example up and running with AJAX calls to fetch paginated data, but need to integrate checkboxes into the table.
Also, is it possible to group rows (and expand collapse them) using this plugin?
Here's a screenshot of what I'm trying to accomplish:
Much thanks in advance !
The included parser-input-select.js parser file allows for dynamically added and updated inputs, checkboxes & select boxes. All you need to do is set the parser for that particular column:
Place this in the header
<script src="../js/parsers/parser-input-select.js"></script>
and include this code:
$(function(){
$("table").tablesorter({
theme : 'blue',
headers: {
0: { sorter: 'checkbox' },
1: { sorter: 'inputs' }
}
});
});
This parser will also work with the pager addon. There isn't a demo of this parser being used with the pager, but you can see it working in the grouping rows widget demo.
Related
I am trying to set up a table in an index view of my "relations" controller including an editable dataslider which directly safes the "preference" value to my db.
Is it possible to combine bootstrap dataslider with "best_in_place" or form method or is that nonsense? (I am newbie on ruby on rails) Does anybody have any suggestions ? Thanks for your help!
I am using "bootstrap slider rails"
Doing what you want through forms may be a little challenging - you'll have to nest each one in a form, ensure that submitting the form doesn't reload the page, etc.
The easiest thing to do might be to pass an onChange function to your data slider that posts the data to the backend. Something along the lines of this (I don't know the data-slider component so I'm sort of guessing as to syntax):
html:
<input id="slider" />
js:
$("#slider").slider().change(function(data) {
$.post({ url: "my/url",
success: function(response) { ... },
...
});
});
Here's the thing: file a.php contains jQuery Tablesorter table.
This is the Tablesorter code:
$("#feedsTable thead").live("click", function() {
$("#feedsTable").tablesorter({
widthFixed : true,
dateFormat : "uk",
}).tablesorterPager({
container : $("#pager"),
positionFixed : false
});
});
Slightly stripped table HTML code:
<div id="tablica">
<article class="module width_full">
<div id="pager">
<form>
[snip]tablesort pager stuff...
</form>
</div>
<table id="feedsTable" class="tablesorter" cellspacing="0">
<thead>
<tr>
[snip]table header row...
</tr>
</thead>
<tbody> ... PHP printed table data
Also, file a.php contains refresh link, which, when clicked, calls b.php file which contains following code: $("#tablica").load("a.php #tablica"); (basically, b.php prints table with new elements and then replaces the old table with the new one using the load function).
Of course, I must use either jQuery live or delegate (having some kind of problems with this one, just can't get Tablesorter to work, so I'm using live instead) function instead of (document).ready because once the load code is executed, Tablesorter will not work with the new table data.
But the problem is that when I use jQuery live() function, I need to click twice to be able to use the Tablesorter plugin. It's like the first click only "activates" the plugin, and then, when table header is clicked for 2nd time, table is sorted and it works great.
In a.php, I can add this code
$(document).ready(function() {
$("#feedsTable thead").click();
});
and it will "activate" the plugin and first user's click on the table header will sort the table. But if I add $("#feedsTable thead").click(); to the b.php file and click refresh link, this "hack" does not work, and again two clicks are needed to be able to use Tablesorter plugin after the table with new data is loaded.
Basically, the question is: I would like Tablesorter to work on first click when using jQuery live, and not only on second. How to fix that?
Any help would be much appreciated!
Thanks.
"of course, I must use either jQuery live or delegate"
http://api.jquery.com/live/:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Try on() and see if it makes much of a difference. If it doesn't then something else is at play.
So, delegate won't work because it is targeting the table inside of #tablica which has all of its contents completely replaced by the load function. Delegate needs an "anchor" element to detect a bubbling event whereas live uses the document, I think. So, the way it is written, when the user clicks anywhere in the thead, tablesorter will initialize. Now a second click will actually sort the column because tablesorter is active.
Anyway, the solution would be to initialize tablesorter within the load callback function. So remove the live function completely and try just this:
$("#tablica").load("a.php #tablica", function(){
$("#feedsTable").tablesorter({
widthFixed : true,
dateFormat : "uk",
}).tablesorterPager({
container : $("#pager"),
positionFixed : false
});
});
Now when the user clicks on the table header it will sort because tablesorter is initialized immediately after the content is loaded.
I would like to have one input field, where user will input search data. Once more than 2 letters are input, I will search on the server and will display found data in the separate div.
Currently I return the data as JSON. I would like to replace that with html (to format the data on the server side with GAE/django). I need to have this since the same template of data output is already used and I don't want to repeat that in javascript (with data( "autocomplete" )._renderItem). My output will also support paging.
Is there any way to replace the whole output (not just for one item)? Or, I should not use autocomplete here?
Don't use autocomplete.
If you are already formatting your output server side then there really is very little work for the javascript to do here.
Try writing your own autocomplete using the onChange event and use $.post to retrieve the resulting formatted output. It might end up as simple as:
$( '#searchbox' ).change( function() {
var s = $(this).val();
if(s.length > 2)
{
$.post("searchresults.php", { search: s }, function(data){
$( '#resultdiv' ).html(data);
});
}
});
Hope that helps.
I am fairly new to JQuery and Javascript...
Currently I am using the following technique or code to populate input boxes from a JQuery UI autocomplete set of search results...
var PopulateFields = function(event, ui){
$('#Custid').val(ui.item.Custid);
$('#Alpha1').val(ui.item.Alpha1);
$('#Alpha2').val(ui.item.Alpha2);
$('#CustName').val(ui.item.CustName);
$('#Address1').val(ui.item.Address1);
$('#Address2').val(ui.item.Address2);
$('#City').val(ui.item.City);
$('#State').val(ui.item.State);
}
$( "#search-by-custname" ).autocomplete({
source: "cust_search_by_name.php",
minLength: 4,
select: PopulateFields
});
The php script is grabbing the info from a database and squirting it back via JSON in the following format:
[{"label":"A Tire Store","value":"A Tire Store","Custid":"10000","Alpha1":"COD123456","Alpha2":"TIRE","CustName":"A Tire Store","Address1":"123 Cherry Lane","Address2":"","City":"City of Bla","State":"FL","Zip":"555555"}]
This works wonderfully with input boxes.
However, if I wanted to make State a select box, how would I populate that Select box with the existing value in the customer record?
Or, is that impossible?
I am trying to create a data entry form, and one of the features I want to have is when they search for a customer record to edit, that their search will populate all fields on the form and then they can edit them.
I thought a select box for State would save me some data validation logic...
My other thought was to use a read only input box for the State (because I know JQuery UI autocomplete will populate that), and then create a "State Selector" Select box that would populate the read only input "State" box for re-submission.
Thoughts?
Are you saying you've tried this and it's failed? Because if you have a select similar to
<select id="State">
<option>AK</option>
<option>FL</option>
<option>WY</option>
</select>
then calling $("#State").val("FL") will work.
I need to be able to edit a table of data in the browser.
I have seen in MVCContrib there is a HTML helper to render out a table. Useful... but what about if I want the user to be able to edit that table? From what I can see it does not help there.
What is the best way to approach this?
Traditional FORM with a TABLE inside? If so is MVC smart enough to parse the posted data back into a collection of rows? How would that work anyway?
Or perhaps it should just switch to edit mode when a row is clicked (using javascript etc) then when user moves to a different row an AJAX action is called to submit just the one row. I can imagine the logic could get complex here - this would presumably still use a form but would I have to insert it into the DOM dynamically?
I also need to be able to add rows to this table. I do not require paging support.
Is there an off the shelf solution out there?
Should I go back to web forms? :)
Take a look at Phil Haack's blog where he describes how to model bind to a list.
Maybe this can help?
I've got the same problem, and I have found a solution for it. Don't think it's the most beautiful, but it's ideal for me, because one of my requirements was be able to edit table data using jQuery's Jeditable plugin.
So I generate a table using MVCContrib's Grid<> extension:
Html.Grid<Somenamespace.Line>( Model.InvoiceLines )
.Attributes( id => "InvoiceGrid" )
.Columns( column => {
column.For( li => li.LineItem.ItemDescription ).Attributes( name => ".LineItem.ItemDescription", #class => "click" );
column.For( li => li.LineItem.InvoiceUnitNetPrice ).Named( "Unit net price " ).Attributes( name => ".LineItem.InvoiceUnitNetPrice", #class => "click" );
column.For( li => li.LineItem.InvoiceQuantity ).Attributes( name => ".LineItem.InvoiceQuantity", #class => "click" );
})
.Render();
//rest of the code
Html.Submit("_submit", "Save");
Right now You can edit in place values, but it doesn't upgrade corresponding model.
All the magic happens after user clicks submit button:
$(document).ready(function() {
$('#_submit').click(function(e) {
e.preventDefault();
$('#InvoiceGrid tbody tr').each(function(index) {
var hidden = $('<input />').attr({ type: 'hidden', name: 'InvoiceLines.Index', value: index });
$(this).children('td:first-child').before(hidden);
$(this).children('td:not(:first-child)').each(function() {
$(this).append($('<input />').attr({ type: 'hidden', value: $(this).text(), name: 'InvoiceLines[' + index + ']' + $(this).attr('name') }));
});
});
$('form').submit();
});
//editable stuff
$('.click').editable(function(value, settings) {
return (value);
}, { submit: 'OK' });
});
In every TD I create hidden input, with value from that TD, in every row input with Index, and the most important here is 'name' attribute: Name of collection in Model[here goes index].rest.of.path, so in this particular case (example):
InvoiceLines[2].LineItem.ItemDescription
Hope it'll help, because rich grid isn't always an answer ;)
Regards
Mateusz
I would checkout one of the javascript UI libraries first:
ExtJS Grid
Yahoo DataTable
Flexigrid
WebForms are easier when it comes to quickly developing rich UI's like editable grids.
Last night I implemented a simple solution: form + table inside, using input fields in the cells with naming convention as described in Phil Haack's blog (thanks to #BengtBe for link).
It's working but its a bit fiddly (e.g. adding rows with jquery requires me to work out the next unused index).
So I am still looking for more solutions.
One I have discovered is the extjs library which provides a very rich grid. I have yet to work out whether there is an easy way to post back the grid data to one of my controller actions yet though...