实现固定表头和可排序的jQuery表格插件|DEMO_HTML素材网-自由分享jQuery、html5、css3的插件库

Basic Usage

Here is a basic table, populated with data provided by Random User Generator (v0.2). Setting up is easy-peasy:

$('table').stickySort();

Avatar	Name	Email	Contact	Location
Avatar	Name	Email	Contact	Location
	samantha morgan	[email protected]	(369)-227-3751	grapevine, idaho
	eli wilson	[email protected]	(857)-619-4186	bozeman, new york
	brian brown	[email protected]	(924)-543-6342	allen, washington
	kathy wilson	[email protected]	(786)-203-4153	ennis, connecticut
	christine ramirez	[email protected]	(778)-129-1925	provo, delaware
	charles lee	[email protected]	(425)-976-3550	akron, virginia
	arthur bennett	[email protected]	(996)-182-3744	wilmington, michigan
	aalivah simmmons	[email protected]	(687)-147-6639	duncanville, tennessee
	brian russell	[email protected]	(600)-224-4416	everett, colorado
	dylan russell	[email protected]	(439)-363-4363	billings, wisconsin
	candice lewis	[email protected]	(733)-701-4550	utica, nebraska
	kaylee cox	[email protected]	(459)-899-9689	rochmond, california
	erin miller	[email protected]	(570)-814-6244	rochester, indiana
	madison brooks	[email protected]	(855)-789-4736	richardson, delaware
	jennifer evans	[email protected]	(214)-201-9140	akron, rhode island
	rebecca hughes	[email protected]	(736)-650-7095	greensboro, north carolina
	samuel taylor	[email protected]	(241)-121-6322	dumas, north dakota
	joseph walker	[email protected]	(736)-940-6308	bueblo, utah
	ethan anderson	[email protected]	(820)-571-9435	grapevine, iowa
	angel barnes	[email protected]	(773)-363-7896	belen, vermont

Sortable basic table

Here is a basic table with sort function, populated with data provided by Random User Generator (v0.2). Setting up is easy-peasy:

$('table').stickySort({ sortable: true });

Also, if you are on a narrow monitor, see how the sticky header plays friendly with overflows along the y-axis:

First Name	Last Name	Email	MD5 hash	SHA1 hash
First Name	Last Name	Email	MD5 hash	SHA1 hash
albert	garcia	[email protected]	9a26de5ea2dbe7fc5b6844128f307c38	68a90898cfc09508ed08aacf24482effe7f8f7c8
alexa	wallace	[email protected]	a3c4b614a1f072e0f968c2712a36323f	adfc8f0aec273eace2629141317c1eac53923f28
jack	cox	[email protected]	28e246ff038060bc335c0bf4925e5d51	8ad9a53bdd3b96cbc28efde629383954666ece67
meghan	taylor	[email protected]	573ce5969e9884d49d4fab77b09a306a	9621a244a447ec749598f8327560ff86095e2c26
amy	collins	[email protected]	f61f2f8157d9d632cc0b2bbc43d883f2	be842d987424dcb128bee9520682687bc2149284
nicole	lewis	[email protected]	e50081b0de0be206cd443d20094d3894	11615c74a29cc915c0802ae001d43b4cd96ced62
richard	graham	[email protected]	03764ebfde7010aa700c6e73f84ed00e	9286fa940279aa33e8e47ca7dd175324f333e4fa
brayden	hill	[email protected]	a03490c03eaa102dadc25dca3cc6772b	6a53d618b92dcc6f23461cd323f993b210876602
amelia	wallace	[email protected]	7b6b45249743ad383e7f2e1fafd640fa	4003345f140d1f3af49b180ecdc8406755e3b472
melissa	scott	[email protected]	5be977ac2dc6c7c07f8825de5f3c9926	34da1369d029a253a7586a8b582100180bba6441
elijah	hall	[email protected]	21d9c57c1d2ae58cf12ece8a3470666b	a2916e062071972d7da46f818b685642b3cffcac
arianna	moore	[email protected]	900e201a6aa7b0b1ce8218782d6142b6	c9d8f39e46aed665fa734cf1ca18b2f99cf6805f
nevaeh	griffin	[email protected]	2e036ecb177e0f732bcbc1b0984ffebd	044507c8314178f51f47bf2fd6e666a4139b6eef
sarah	smith	[email protected]	de1b2a7baf7850243db71c4abd4e5a39	148627088915c721ccebb4c611b859031037e6ad
edward	wilson	[email protected]	6673166b500d058c743b79c746c59243	2e8ae6ca8708f518d69cd1475017303ca0ae0080

Biaxial Headers

We are allowed to have some fun, aren't we? Now we can try having biaxial tables. Remember that the markup for biaxial table has to be as follow, where each row in <tbody> has to have the first cell as <th> instead of <td>:

<table>
    <thead>
        <tr>
            <th></th>
            <!-- add more <th> as of when needed -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th><!-- first cell must ne <th> -->
            <td></td><!-- other cells are <td> -->
            <!-- add more <td> as of when needed -->
        </tr>
        <!-- add more rows as of when needed -->
    </tbody>
</table>

Name	Email	Work	Mobile
Name	Email	Work	Mobile
sophie flores	[email protected]	(788)-499-9689	(915)-162-6803
madison hill	[email protected]	(523)-950-9768	(869)-333-9842
jack foster	[email protected]	(533)-613-4005	(253)-508-1724
carl ward	[email protected]	(280)-130-9702	(429)-838-3276
olivia bell	[email protected]	(589)-449-4963	(685)-204-8461
allison griffin	[email protected]	(498)-153-4556	(681)-786-9927
stephen smith	[email protected]	(687)-245-2715	(209)-445-9081
hannah wallace	[email protected]	(784)-731-8424	(922)-401-6114
evelyn carter	[email protected]	(871)-179-9521	(794)-340-1989
austin cook	[email protected]	(799)-991-8194	(440)-901-1665
dylan lee	[email protected]	(376)-197-3547	(125)-339-4193
mark hamilton	[email protected]	(547)-578-7096	(777)-512-6769
katie garcia	[email protected]	(790)-247-1128	(757)-225-5553
paul williams	[email protected]	(997)-843-8164	(626)-160-7932
jerry bailey	[email protected]	(647)-709-8682	(993)-613-1640

Even better: what about an overflowing table with sticky header and column?

Name	Email	Phone	Address	MD5 hash	SHA1 hash
Name	Email	Phone	Address	MD5 hash	SHA1 hash
kylie roberts	[email protected]	(587)-829-8041	6129 ash dr celina new mexico 52670	69705c9af115287878ba5adcaf7d0408	ad5eb62a8b9682a143e34180aba41a164eb9692b
angel wilson	[email protected]	(631)-781-7924	7403 camden ave moscow georgia 71422	a5101e70e5a075abab1c08c7a6c39612	ddb4a6bd8fed8f7bed2b44e7a69fde18974e5c42
taylor taylor	[email protected]	(279)-572-7050	3962 n stelling rd shelby arizona 63970	cb205edee16b24366c871cf55e781346	0391a1e58f324b3a0c79d32dd09436bd45bfc773
soham wright	[email protected]	(524)-293-6404	5905 harrison ct raleigh idaho 13158	cebc5f0a8eb734bd46f5c8fa3d7a7e07	c59f3a21357fd5c20aa56ec50cb3246939950c23
taylor wright	[email protected]	(569)-816-1342	7246 w pecan st grapevine louisiana 80892	33229a6d43b349aa7adf8afa9b6e50d2	97eebf414085126c7acaf1bdb36d65527b0b5969
mary sanders	[email protected]	(252)-181-4717	7163 mockingbird hill hamsburg north dakota 58352	a37b2a637d2541a600d707648460397e	8964af7e7645a7c6c1e891f5e69d22e8adaafe70
david watson	[email protected]	(748)-213-1039	5621 sunset st dumas south dakota 65723	c0961eb84d1e91451ecb8450870a2953	86fab557254e3d14ebd493ae1ec9b9ad9f0685d3
elizabeth johnson	[email protected]	(473)-683-1255	2893 wheeler ridge dr moscow north carolina 36952	0bcdc9b55496ea12eb41b8a432a39753	49f697a8b043e7d85c8446fbfced0643eb44981d
mason price	[email protected]	(571)-374-1402	7201 railroad st dumas indiana 35322	4693fbb215b8ca15a6900f0cfa164cdc	3df47082217942e736428d6666efb933e2d6a1f6
jason price	[email protected]	(420)-192-2731	6906 plum st yakima minnesota 12486	1ea50771988c19844c52aa78325282bf	2d088eb402f3d9db2a2ccef20c339e6f7bf6c1fd

The Final Example — Biaxial overflow and biaxial headers

This is the ultimate example — we force a very wide table to overflow along both axis.

Case	#1	#2	#3	#4	#5	#6	#7	#8	#9	#10	#11	#12	#13	#14	#15	#16	#17	#18	#19	#20
Case	#1	#2	#3	#4	#5	#6	#7	#8	#9	#10	#11	#12	#13	#14	#15	#16	#17	#18	#19	#20
Patient #30	76	54	33	8	4	77	81	71	86	72	39	18	41	94	42	72	63	62	100	78
Patient #24	47	61	88	51	75	4	81	49	26	49	94	43	12	41	59	50	26	92	83	33
Patient #88	53	78	29	84	55	19	37	89	13	17	15	89	69	61	56	36	90	32	97	15
Patient #47	34	40	63	53	33	88	4	5	3	42	54	95	16	51	79	26	43	77	57	76
Patient #80	12	23	2	89	2	20	29	47	38	86	32	68	66	66	3	17	82	6	37	83
Patient #68	91	70	37	13	49	61	83	2	67	23	61	37	10	71	32	76	22	66	8	17
Patient #36	62	58	87	34	77	80	69	45	11	92	100	99	7	62	54	28	48	71	75	70
Patient #77	80	82	58	66	70	64	33	77	60	14	29	93	39	60	13	9	51	6	44	13
Patient #29	78	1	91	21	38	41	92	72	56	10	40	89	8	26	51	88	7	100	68	96
Patient #69	55	63	49	18	81	56	93	30	53	20	99	98	99	87	53	84	2	18	5	25
Patient #33	36	31	61	68	40	4	55	19	18	17	46	1	27	40	60	3	69	42	87	31
Patient #20	23	24	20	83	7	69	60	7	80	59	10	36	66	88	10	26	56	74	12	66
Patient #21	83	93	71	54	21	96	19	26	5	97	15	48	93	98	42	72	89	45	83	91
Patient #15	100	58	85	70	32	50	77	5	56	34	92	18	89	23	13	17	83	85	32	60
Patient #89	28	62	87	77	87	54	72	7	31	66	66	84	44	79	4	15	45	13	8	21
Patient #43	96	27	63	28	65	73	22	63	22	8	1	77	32	31	64	10	16	94	98	70
Patient #25	10	19	11	4	90	44	22	95	62	87	96	43	20	11	40	10	69	28	89	90
Patient #9	67	87	9	55	92	78	26	58	38	79	50	17	81	9	70	37	3	42	33	36
Patient #59	22	21	98	91	15	39	28	31	5	90	100	85	46	80	100	26	48	29	7	36
Patient #23	90	90	64	96	89	52	85	49	50	73	43	76	90	1	98	35	12	48	15	1

Res dem agam more ima jure rea. An ab rantem ut et potius gaudet. Ei scientiis videretur ea objective nitebatur in me. Tantumque mo ac proponere eminenter. Cum hos putandum concedam hic supponit commoveo. Praestari an similibus credendas priusquam perspicue improviso re ac. Agi praesertim aliquoties negationem sap commendare repugnemus frequenter est. Imaginabar parentibus imaginaria expectanti ii et confirmari.

Alteram tanquam creatis viribus at si. Maximam vos hoc antehac imo ignotas eae aliarum fictile. Excludat is potestis me du si cognitio liberius. Sum quae rem meae male haec. Fallacem totamque at loquebar formemus suspicio ex me ne. Haereo mutata dum vix magnum tertia volunt nam suo audita.