I am building an HTML table based on the results of a query that returns XML that I'm converting to an HTML table using XSL. I've been asked to add sorting, pagination and filtering. I was able to add some javascript libraries to enable sorting and pagination, and a different library to enable the filtering. However, since they are separate libraries, they do not cooperate, so when I filter, the table doesn't keep to the constraints of the 'entries per page' field.
I made some attempts at a few jQuery solutions, but couldn't get them to work. What I'm looking for is the best and (naturally) the easiest solution to adding pagination, column sorting and column filtering without the need to press enter or hit any buttons.
http://www.datatables.net/
Table Widget seems to be able to do the js part.
Looks complicated too
$(document).ready(function() {
$('#tableId').dataTable();
} );
Related
I am writing a program for managing an inventory. It serves up html based on records from a postresql database, or writes to the database using html forms.
Different functions (adding records, searching, etc.) are accessible using <a></a> tags or form submits, which in turn call functions using http.HandleFunc(), functions then generate queries, parse results and render these to html templates.
The search function renders query results to an html table. To keep the search results page ideally usable and uncluttered I intent to provide only the most relevant information there. However, since there are many more details stored in the database, I need a way to access that information too. In order to do that I wanted to have each table row clickable, displaying the details of the selected record in a status area at the bottom or side of the page for instance.
I could try to follow the pattern that works for running the other functions, that is use <a></a> tags and http.HandleFunc() to render new content but this isn't exactly what I want for a couple of reasons.
First: There should be no need to navigate away from the search result page to view the additional details; there are not so many details that a single record's full data should not be able to be rendered on the same page as the search results.
Second: I want the whole row clickable, not merely the text within a table cell, which is what the <a></a> tags get me.
Using the id returned from the database in an attribute, as in <div id="search-result-row-id-{{.ID}}"></div> I am able to work with individual records but I have yet to find a way to then capture a click in Go.
Before I run off and write this in javascript, does anyone know of a way to do this strictly in Go? I am not particularly adverse to using the tried-and-true js methods but I am curious to see if it could be done without it.
does anyone know of a way to do this strictly in Go?
As others have indicated in the comments, no, Go cannot capture the event in the browser.
For that you will need to use some JavaScript to send to the server (where Go runs) the web request for more information.
You could also push all the required information to the browser when you first serve the page and hide/show it based on CSS/JavaScript event but again, that's just regular web development and nothing to do with Go.
Is it possible to create a drop down list in html with a large amount of data without using
<option>Something</option>
for each content.
For example, I want to make a drop down list with numbers 1-100. Is it required to define each one by one?
Yes I tried the same after reading your question and it is possible to create a drop down list in html with a large amount of data:
I tried using Jquery because according to me it was simple to write and understand.
in your html you just need to write tag with id.
<html>
<select id="select">
</select>
</html>
Now in your Javascript(Do not forget to import jquery) you have to just write:
$(document).ready(function() {
for(i=1;i<=100;i++)
{
$("#select").append("<option>"+i+"</option>");
}
});
In this way you can make drop down list of 1 to 100 in easier way.Hope this helps you :)
You are not obliged to place your data in <select><option>... if you want to create a drop-down interface component. The <select> is a standard, default and definitely a preferred way to do so. But you can imitate its behavior with other tags available.
Now, I see you want to put in lots of data and probably you don't want to do it by hand. HTML doesn't have markup structures that allow for automated content generation, so yes, you have to define all those options in drop-down list yourself. And every separate option has to be inside its own tag.
Now, that would be a tedious task, right? Never fear! Programming languages to the rescue. It is possible can create those tags automatically based on some data, be it predefined, generated in accordance to some parameters, or just random.
I'm not sure why everyone assumed that the question is about creating <option> tags in jQuery... there are many other options available.
Server-side generation: if you are using PHP, Python, or any other language on the server, you can build your <select> structure on the server, insert it into the html and present it to the user. If your data is static - you have a benefit of caching which reduces load on the server and on the network.
Client-side generation: you can use JavaScript to create those options as the page is being loaded (or on user request). Of course if you want to use some JavaScript framework that facilitates the process - you can use jQuery, Prototype, Zepto... whatever you wish to include with your page.
I'm not showing any code here because there's not much information in the question. For example, do you want to build your drop-down out of some predefined data. If yes - where and in which form do you think it will be stored? Will it be static or dynamic? Etc. etc. etc.
If you update your question with more details, then we can update our answers with more information. Thanks.
I would consider creating the markup server side (e.g. using PHP) or with JavasScript/jQuery.
Here's a jQuery example:
var options = [];
for (var n = 1; n <= 100; n++){
options.push('<option value="' + n + '">' + n + '</option>');
}
$('<select/>', {
'id': 'my-select',
'name': 'my-select',
html: options.join('')
}).appendTo('body');
And a Fiddle: http://jsfiddle.net/XffwR/1/
Of course you may not want to go that route, in which case yes you would need to add HTML markup for each option manually, as John Conde says.
Yes, you must define each one in it's own <option> tag.
I have an html table and I need to populate the contents of an array into the table dynamically and also,If the content exceeds more than ten row need to create pagination
I suggest jQuery DataTables to provide pagination, sorting and filtering very easily. All you need to do is emit standard markup, and then initialise the DataTables plugin.
You can populate the from numerous data sources, for example via AJAX or just load it into the page.
See http://www.datatables.net/
Please clarify what you mean by "populate the contents of an array into the table".
Hi I am trying to incorporate Table filtering , where the user can select a author or name and filter the table based on then name . The feed has to be Based on xml feed .
Is there any example that I can use?
I was was looking at this example http://dev.sencha.com/deploy/ext-4.0.2/examples/grid/xml-grid.html
or something http://www.picnet.com.au/resources/tablefilter/demo.htm
How can I add a combo box(dropdown box) outside the table to filter based on various authors selection name the feed i would like to use is xml
Or any other example similar to this
Thanks
You'd be best off using a JavaScript library such as jQuery, which enables you to use the myriad plugins that are available.
jqGrid does all of that kind of stuff for you.
Have a look at the examples here under Live Data Manipulation > Searching Data. You should be able to just replace the input with a select.
Alternatively, still with jQuery but this question might do what you need: Filter table from <select> input using jQuery
The answer is in your question. Filters are generated by jQuery plugin. Here's step by step manual.
Use standard DOM (DomDocument class). Example: this testkit loads any HTML DTD, and you can do any filter with a good and standard XSLT transform.
I'm using yql to return a list of links from specific webpages. So far so good, it returns all the links that I pretend, however I don't know how to translate that info into my webpage.
Here's what I'm trying to do:
YQL returns a list of links in the
results
I want those links to appear in my
webpage, inside a table, inside divs,
etc... like if i wrote them there.
I have been trying to find a way to do this but I don't know much of js and json so I'm here trying to achieve some answer from those of you that might know a way.
There are a couple of ways to do this, depending on which approach you want to take.
First, and simplest, is server-side generation. This is what would result, for example, if a user hits a Submit button on a search form to send you his query, your script receives the query and generates the page, then sends that page to the user. In this case, your question is largely trivial. In pseudocode:
ASSIGN the list of results to list L
FOR EACH ITEM r IN L
PRINT a string containing an HTML template, substituting the value
r where appropriate
It's trivial enough that I suspect you want to do this via DOM manipulation. This is what requires JavaScript: you get the query, send the request without refreshing the page, and want to add the results to the DOM. If you're receiving the list of results, you're already most of the way there. Using jQuery, you would do the same thing as in the pseudocode above, except that where it has the PRINT statement you would have:
$(".SearchResults").append("<li>" + r + "</li>");
I highly recommend reading through the jQuery tutorial. It's not as hard as you think.