How to filter html table? - html

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.

Related

Is there any way to filter JSON using amp html

I know that there is a planned feature upgrade to create a custom amp-filter tag
https://github.com/ampproject/amphtml/issues/9113
I was wondering if there was any workaround to doing client-side filtering of json using amp html?
The only option you have at the moment is combining amp-list and amp-bind. Use amp-bind to dynamically change the amp-list src attribute based on the selected filter. The actual filtering still needs to happen server-side. Here is a sample implementation: https://ampbyexample.com/samples_templates/product_browse_page/preview/.

How to display XML data(list) in HTML(CSS)

I want build a website that have two "table" to display two lists of data that stored in XML.
Category and items(think todo list. one category has more then one item)
I'm not sure how to display the list of data. What kind specific technique should I use? Can I only use HTML and CSS to achieve this(My friend said I have to use javascript).
U need to use AJAX for that purpose.
AJAX stands for Asynchronous Javascript XML...
This will help you to get your XML data loaded on Web Pages

XML data to be sorted by HTML Form

I would like to do a basic search functionality but the data I am using is XML - How would I got about making a search form that can filter the data from the XML and display it in HTML whether it meets the HTML form's criteria.
I have not yet tried to use a HTML form to display the XML data as I do not know how to do this, therefore I am asking for direction or examples that may be elsewhere in the web, as I ma having trouble doing so.
<UKPRN>10004048</UKPRN>
<ACCOMURL>http://www.londonmet.ac.uk/accommodation/</ACCOMURL>
<PRIVATELOWER>5000</PRIVATELOWER>
<PRIVATEUPPER>8300</PRIVATEUPPER>
<COUNTRY>XF</COUNTRY>
<NSP>1</NSP>
<Q24>51</Q24>
<Q24POP>2242</Q24POP>
<KISCOURSE>
<TITLE>FdSc Crime Scene and Forensic Investigation</TITLE>
<UCASCOURSEID>F411</UCASCOURSEID>
<VARFEE>10</VARFEE>
<FEETBC>1</FEETBC>
<WAIVER>0</WAIVER>
<MEANSSUP>0</MEANSSUP>
<OTHSUP>0</OTHSUP>
<ENGFEE>5700</ENGFEE>
</KISCOURSE>
There is just a basic look at my XML set up - any help is appreciated!
EDIT: Further to the question asked below, The XML data is structured as above, and I wish for some PHP or Html Form to search the Title of the title KISCOURSE and then display relevant searches.
Since this is rather a bigger project than a short question my answer just aims to give you some ideas on how I would approach this. Tell me whether you think it is helpful and if you have further questions.
Assuming that you have your data in one XML file, e.g. data.xml, and you have access to PHP and its XSLTProcessor class I would do the following:
Create an HTML form with inputs for the fields you want to query
Write an XSL transformation to filter data.xml on the wanted parameters
Write a PHP script that gets parameters from the HTML form, applies them to the transformation, executes it and outputs the result
Tell me if you find this approach suitable for you and I can add more detail. Good luck!

HTML ext js fieldsets

This is my first experience with ext js and I use ext js designer tool.
I have created 3 fieldsets each having different input format but the same input for backend.
E.g. search by selecting checkboxes
Or search by type in full data
Or search by type in keywords in data
The user would use only one of these and there is one common submit.
I want something like this:
If one fieldset has focus others are disabled and cleared of any entries.
How to implement this in JavaScript and using ext js?
First I have to say Sencha API Docs are your friend. It's not clear which fields you are using but all fields have events that you can use for that like change, focus, and many more. You should also take a look at the Sencha ExtJS Examples and the Learning-Resources
If you still don't get it to work post the code what you have tried so far and you will get further help.

Ideal HTML table manipulation solution

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();
} );