Download: Full instances demonstration projects can be downloaded from GitHub.

Demo JS Source Code

Demo HTML Source Code

Switching CSS theme:

FULL Paging default theme +checkbox + index, count the use of built-in properties

	count	index	{index+1}	id	name	info	operation
	{datatableCount }	{datatableIndex }	{datatableIndex+1 }	No.{id}	{name}	{info}	show edit delete

Specify paging theme SIMPLE + Loading = "show" with tips + Sort Properties

	count	id	name	info	sort、order	operation
	{datatableCount }	No.{id}	{name}	{info}	sort={sort} order={order}	show edit delete

Judge sentences DataTable expression + Loading = "none" + row = "10"

	count	index	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{datatableIndex+(pageNo-1)*rowPerPage}	No.{id}	{name}	{info}	%{ if(id%2==0){ var op='show '; op+='edit'; DataTable.out(op); }else{ DataTable.out('show edit delete'); } }%

With start and end data loading paging event handler + Custom sort indicator

	countPerTotal	id	name	info	sort、order	operation
	{datatableCount+(pageNo-1)*rowPerPage}	No.{id}	{name}	{info}	sort={sort} order={order}	show edit delete

Cancel tabs

	count	id	name	info	operation
	{datatableCount}	No.{id}	{name}	{info}	show edit delete

Custom Paging Example 1

	pageNo	id	name	info	operation
	{pageNo}	No.{id}	{name}	{info}	show edit delete

Now {pageNo}/{maxPage} page Now {rowPerPage}/{totalCount} row {order} {sort} first previous next last

Custom Paging Example 2

	pageNo	id	name	info	operation
	{pageNo}	No.{id}	{name}	{info}	show edit delete

Now{pageNo}/{maxPage} page Now{rowPerPage}/{totalCount} row {order} {sort}

With a search page + loading="hide"

username： userinfo：

	count	condition	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{user.name},{user.info}	No.{id}	{name}	{info}	%{ if(id%2==0){ DataTable.out('show edit'); }else{ DataTable.out('show edit delete'); } }%

EasyDataTable 2.X features

Support: static data source load, static data filtering query static data sorting (2.X)

Dynamic range of data sources to load + NowPage sort of static data filtering query + default like_i query matching MatchMode

username： userinfo：

NowPageCurrent page data range static filters (also supports dynamic data sources and static data source page filtering)

	count	index	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{datatableIndex+(pageNo-1)*rowPerPage}	No.{id}	{name}	{info}	%{ if(id%2==0){ DataTable.out('show edit'); }else{ DataTable.out('show edit delete'); } }%

Static load JSON data source + NowPage range of static data filtering query without sorting + paging (2.X)

username（ sql_i MatchMode）： userinfo（ like_i MatchMode）：

NowPageCurrent page data range static filters (also supports dynamic data sources and static data source page filtering)

	count	index	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{datatableIndex+(pageNo-1)*rowPerPage}	No.{id}	{name}	{info}	%{ if(id%2==0){ DataTable.out('show edit'); }else{ DataTable.out('show edit delete'); } }%

JSON file data source load + All range of static data filtering query sorting (2.X)

username（ sql_i MatchMode）： userinfo（ like_i MatchMode）：

AllCurrent page data range static filters (support only static data source page filtering)

	count	index	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{datatableIndex+(pageNo-1)*rowPerPage}	No.{id}	{name}	{info}	%{ if(id%2==0){ DataTable.out('show edit'); }else{ DataTable.out('show edit delete'); } }%

Static data source -Array object data collection (server dynamic) + NowPage range of static data filtering query sorting + Adjust the column width by dragging the plug (2.X)

username（ sql_i MatchMode）： userinfo（ like_i MatchMode）：

NowPageCurrent page data range static filters (also supports dynamic data sources and static data source page filtering)

	count	index	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{datatableIndex+(pageNo-1)*rowPerPage}	No.{[0]}	{[1]}	{[2]}	%{ if([0]%2==0){ DataTable.out('show edit'); }else{ DataTable.out('show edit delete'); } }%

Static data source -Array object data collection (static data source) + All range of static data filtering query sorting (2.X)

username（ sql_i MatchMode）： userinfo（ like_i MatchMode）：

All Current page data range static filters (support only static data source page filtering)

	count	index	id	name	info	operation
	{datatableCount+(pageNo-1)*rowPerPage}	{datatableIndex+(pageNo-1)*rowPerPage}	No.{[0]}	{[1]}	{[2]}	%{ if([0]%2==0){ DataTable.out('show edit'); }else{ DataTable.out('show edit delete'); } }%