Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don’t have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don’t have to check out dozens of plugins, learn how to use them, only to find out they don’t work in a specific browser. And even if jKit doesn’t have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don’t find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it’s already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here’s a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Sort command

Let visitors sort table rows by their columns.

Basic Usage (HTML)

data-jkit="[sort:what=text;by=date]"

Advanced Init (JavaScript)

$('#myelement').jKit('sort', { 'what': 'text', 'by': 'date' });

Options

OptionValuesDefaultDescription
what“html”, “class” or “text”textOn what kind of source to sort the rows
by“num”, “date” or “text”The kind of stuff to sort (date has to be an javascript date datestring)
startInt0From which starting position in the string to take the sort string (0 = first character)
endInt0From which ending position in the string to take the sort string (0 = last character)

Events

EventDescription
clickedTriggered on click
completeTriggered after sorting is finished

Examples

Basic example:

Sort table rows on click (up and down), with different sorting options:

Name Location Birthday Category Status Superior Price (CHF)
Mr. Max KellerCH-7278 Davos Monstein1-29-1986freelanceractive#1201.00
Ms. Sophia RothCH-3186 Düdingen2-16-1955freelanceractive#12025.25
Mr. Fredi BaumannCH-6543 Arvigo11-21-1993freelanceractive2.99
Ms. Hannah ZimmermannLI-9493 Mauren6-26-1967freelanceractive#116848.95
Ms. Maja BrunnerD-21207 Seevetal10-22-1934traineeactive#120200.10
Mr. Tom FischerLI-9492 Eschen5-19-1955freelancerinactive#1168-5.05
Ms. Alina GerberD-21710 Engelschoff10-15-1981employeeactive#116810
Mr. Tim GerberCH-6543 Arvigo12-8-2022freelanceractive#1204721.45
Mr. Felix MeierLI-9486 Schaanwald8-26-1975guestactive#12012.55
Mr. Fredi MüllerLI-9486 Schaanwald10-24-1953traineeactive#120354.50
Mr. Tim GerberCH-1773 Léchelles12-25-1966freelanceractive42.85
Ms. Lilli MeyerD-21207 Seevetal11-29-1938guestactive87.41
Ms. Emilie FischerD-04299 Leipzig11-7-2022freelanceractive#463354.01
Mr. Fredi GrafCH-6534 S. Vittore12-7-2022employeeactive#12014.12
Ms. Cordelia WeberCH-6543 Arvigo2-23-1967employeeactive#12010.25
Source:
<table class="sort" width="100%">
	<thead>
		<tr>
			<th data-jkit="[sort:what=text;start=4]">Name</th>
			<th data-jkit="[sort:what=text]">Location</th>
			<th data-jkit="[sort:what=text;by=date]">Birthday</th>
			<th data-jkit="[sort:what=text]">Category</th>
			<th data-jkit="[sort:what=text]">Status</th>
			<th data-jkit="[sort:what=text;start=2]">Superior</th>
			<th data-jkit="[sort:what=text;by=num]">Price (CHF)</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>Mr. Max Keller</td><td>CH-7278 Davos Monstein</td><td>1-29-1986</td><td>freelancer</td><td>active</td><td>#120</td><td>1.00</td></tr>
		<tr><td>Ms. Sophia Roth</td><td>CH-3186 Düdingen</td><td>2-16-1955</td><td>freelancer</td><td>active</td><td>#120</td><td>25.25</td></tr>
		<tr><td>Mr. Fredi Baumann</td><td>CH-6543 Arvigo</td><td>11-21-1993</td><td>freelancer</td><td>active</td><td></td><td>2.99</td></tr>
		<tr><td>Ms. Hannah Zimmermann</td><td>LI-9493 Mauren</td><td>6-26-1967</td><td>freelancer</td><td>active</td><td>#1168</td><td>48.95</td></tr>
		<tr><td>Ms. Maja Brunner</td><td>D-21207 Seevetal</td><td>10-22-1934</td><td>trainee</td><td>active</td><td>#120</td><td>200.10</td></tr>
		<tr><td>Mr. Tom Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td><td>freelancer</td><td>inactive</td><td>#1168</td><td>-5.05</td></tr>
		<tr><td>Ms. Alina Gerber</td><td>D-21710 Engelschoff</td><td>10-15-1981</td><td>employee</td><td>active</td><td>#1168</td><td>10</td></tr>
		<tr><td>Mr. Tim Gerber</td><td>CH-6543 Arvigo</td><td>12-8-1943</td><td>freelancer</td><td>active</td><td>#120</td><td>4721.45</td></tr>
		<tr><td>Mr. Felix Meier</td><td>LI-9486 Schaanwald</td><td>8-26-1975</td><td>guest</td><td>active</td><td>#120</td><td>12.55</td></tr>
		<tr><td>Mr. Fredi Müller</td><td>LI-9486 Schaanwald</td><td>10-24-1953</td><td>trainee</td><td>active</td><td>#120</td><td>354.50</td></tr>
		<tr><td>Mr. Tim Gerber</td><td>CH-1773 Léchelles</td><td>12-25-1966</td><td>freelancer</td><td>active</td><td></td><td>42.85</td></tr>
		<tr><td>Ms. Lilli Meyer</td><td>D-21207 Seevetal</td><td>11-29-1938</td><td>guest</td><td>active</td><td></td><td>87.41</td></tr>
		<tr><td>Ms. Emilie Fischer</td><td>D-04299 Leipzig</td><td>11-7-1942</td><td>freelancer</td><td>active</td><td>#463</td><td>354.01</td></tr>
		<tr><td>Mr. Fredi Graf</td><td>CH-6534 S. Vittore</td><td>12-7-1971</td><td>employee</td><td>active</td><td>#120</td><td>14.12</td></tr>
		<tr><td>Ms. Cordelia Weber</td><td>CH-6543 Arvigo</td><td>2-23-1967</td><td>employee</td><td>active</td><td>#120</td><td>10.25</td></tr>
	</tbody>
</table>

Sort, events and the cycle command:

In this example we are using the jKit event system to trigger the cycle command whenever the table is sorted:

Name Location Birthday Category Status Superior Price (CHF) Mr. Max KellerCH-7278 Davos Monstein1-29-1986freelanceractive#1201.00 Ms. Sophia RothCH-3186 Düdingen2-16-1955freelanceractive#12025.25 Mr. Fredi BaumannCH-6543 Arvigo11-21-1993freelanceractive2.99 Ms. Hannah ZimmermannLI-9493 Mauren6-26-1967freelanceractive#116848.95 Ms. Maja BrunnerD-21207 Seevetal10-22-1934traineeactive#120200.10 Mr. Tom FischerLI-9492 Eschen5-19-1955freelancerinactive#1168-5.05 Ms. Alina GerberD-21710 Engelschoff10-15-1981employeeactive#116810 Mr. Tim GerberCH-6543 Arvigo12-8-2022freelanceractive#1204721.45 Mr. Felix MeierLI-9486 Schaanwald8-26-1975guestactive#12012.55 Mr. Fredi MüllerLI-9486 Schaanwald10-24-1953traineeactive#120354.50 Mr. Tim GerberCH-1773 Léchelles12-25-1966freelanceractive42.85 Ms. Lilli MeyerD-21207 Seevetal11-29-1938guestactive87.41 Ms. Emilie FischerD-04299 Leipzig11-7-2022freelanceractive#463354.01 Mr. Fredi GrafCH-6534 S. Vittore12-7-2022employeeactive#12014.12 Ms. Cordelia WeberCH-6543 Arvigo2-23-1967employeeactive#12010.25
Source:
<div data-jkit="[cycle:what=css.background;where=table > tbody > tr;scope=all;sequence=#ddd,#fff][cycle:onevent=tablesort.complete;what=css.background;where=table > tbody > tr;scope=all;sequence=#ddd,#fff]">
	<table class="sort" width="100%">
		<thead>
			<tr>
				<th data-jkit="[sort.tablesort:what=text;start=4]">Name</th>
				<th data-jkit="[sort.tablesort:what=text]">Location</th>
				<th data-jkit="[sort.tablesort:what=text;by=date]">Birthday</th>
				<th data-jkit="[sort.tablesort:what=text]">Category</th>
				<th data-jkit="[sort.tablesort:what=text]">Status</th>
				<th data-jkit="[sort.tablesort:what=text;start=2]">Superior</th>
				<th data-jkit="[sort.tablesort:what=text;by=num]">Price (CHF)</th>
			</tr>
		</thead>
		<tbody>
			<tr><td>Mr. Max Keller</td><td>CH-7278 Davos Monstein</td><td>1-29-1986</td><td>freelancer</td><td>active</td><td>#120</td><td>1.00</td></tr>
			<tr><td>Ms. Sophia Roth</td><td>CH-3186 Düdingen</td><td>2-16-1955</td><td>freelancer</td><td>active</td><td>#120</td><td>25.25</td></tr>
			<tr><td>Mr. Fredi Baumann</td><td>CH-6543 Arvigo</td><td>11-21-1993</td><td>freelancer</td><td>active</td><td></td><td>2.99</td></tr>
			<tr><td>Ms. Hannah Zimmermann</td><td>LI-9493 Mauren</td><td>6-26-1967</td><td>freelancer</td><td>active</td><td>#1168</td><td>48.95</td></tr>
			<tr><td>Ms. Maja Brunner</td><td>D-21207 Seevetal</td><td>10-22-1934</td><td>trainee</td><td>active</td><td>#120</td><td>200.10</td></tr>
			<tr><td>Mr. Tom Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td><td>freelancer</td><td>inactive</td><td>#1168</td><td>-5.05</td></tr>
			<tr><td>Ms. Alina Gerber</td><td>D-21710 Engelschoff</td><td>10-15-1981</td><td>employee</td><td>active</td><td>#1168</td><td>10</td></tr>
			<tr><td>Mr. Tim Gerber</td><td>CH-6543 Arvigo</td><td>12-8-1943</td><td>freelancer</td><td>active</td><td>#120</td><td>4721.45</td></tr>
			<tr><td>Mr. Felix Meier</td><td>LI-9486 Schaanwald</td><td>8-26-1975</td><td>guest</td><td>active</td><td>#120</td><td>12.55</td></tr>
			<tr><td>Mr. Fredi Müller</td><td>LI-9486 Schaanwald</td><td>10-24-1953</td><td>trainee</td><td>active</td><td>#120</td><td>354.50</td></tr>
			<tr><td>Mr. Tim Gerber</td><td>CH-1773 Léchelles</td><td>12-25-1966</td><td>freelancer</td><td>active</td><td></td><td>42.85</td></tr>
			<tr><td>Ms. Lilli Meyer</td><td>D-21207 Seevetal</td><td>11-29-1938</td><td>guest</td><td>active</td><td></td><td>87.41</td></tr>
			<tr><td>Ms. Emilie Fischer</td><td>D-04299 Leipzig</td><td>11-7-1942</td><td>freelancer</td><td>active</td><td>#463</td><td>354.01</td></tr>
			<tr><td>Mr. Fredi Graf</td><td>CH-6534 S. Vittore</td><td>12-7-1971</td><td>employee</td><td>active</td><td>#120</td><td>14.12</td></tr>
			<tr><td>Ms. Cordelia Weber</td><td>CH-6543 Arvigo</td><td>2-23-1967</td><td>employee</td><td>active</td><td>#120</td><td>10.25</td></tr>
		</tbody>
	</table>
</div>

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

 

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]