William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery: sort, pagination, search functions and Submit form

Here I summary my codes regarding on jQuery’s usage: sort, pagination, search functions and Submit form

1. write html in regular way, not add javascript in html itself. e.g.:
<a href=”test.php?page=2″>
<form action=”test.php” method=”post” id=”form_id>…</form>
<div id=”div_sort_pagination”></div>

2. customize css in external file, not use too many classes, or ids. the more cascade definition, the better.

3. After that, add jQuery into the html.

var url = 'test.php';
var divid = 'div_sort_pagination';

// add a jQuery method: when click sorting link, 
// 1. dispaly a 'wait.gif' while processing; 
// 2. put results in <div id="div_sort_pagination">
jQuery.fn.sortBy= function(sort_column) {
  $(this).find('img').attr('src', '../images/wait.gif').show();
  $.get(url, {sort:sort_column}, function(data){
  return false;

//constract 2 dynamic buttons ('up' and 'down') to sort by 'async' and 'sync'.
$('th:gt(0)').each(function() {
  var t1 = $(this);
  var t2 = t1.text();
  var t3 = t2 + ' desc';
  var t = '<br /><a href="javascript:void(0);" ' + 
    'onClick="$(this).sortBy(\''+t2+'\')"> ' +
    '<img src="../images/up.jpg" border="0" width="13" height="11" alt="up"> ' +
    '</a> \n' + 
    '<a href="javascript:void(0);" ' +
    'onClick="$(this).sortBy(\''+t3+'\')"> ' +
    '<img src="../images/down.jpg" border="0" width="13" height="11" alt="down">' +

// when mouse move over some columns, 
// use 'qtip' to display details.
$("td span.active").each(function() {
  var content = $(this).html();
	content: content,
	show: 'mouseover',
	hide: 'mouseout',
	position: { corner: { target: 'topRight', tooltip: 'bottomLeft' } },
	style: {
	  tip: 'leftMiddle',
	  width: 120,
	  padding: 4,
	  background: '#A2D959',
	  color: 'black',
	  textAlign: 'center',
	  border: { width: 7, radius: 10, color: '#A2D959' },
	  tip: 'bottomLeft',
	  name: 'dark'

// suppose we have a <a href="test.php?page=2&sort=name">, 
// make it ajax-style, not reload page, just refresh 
// <div id="div_sort_pagination">
// 1. stop the default process which click the link.
// 2. use $.get to refresh the <div id="div_sort_pagination">.
$("tfoot td a, thead td a").each(function(index) {
  var $a = $(this);
  var t1 = $(this).attr('href');
  var turl = url+t1;
  $a.click(function(event) {
	$.get(turl, function(data){$("#"+divid).html(data)});
	return false;

It is pretty cool with high performance and user friendly display.

Here are more:
change form submit to ajax-style. This way only refresh some part of the screen, not reload and lost focus.

$('#form_id').bind('submit', function(event) {
	type: 'post',
	url: 'test.php',
	data: $('#form_id').serialize()+'&search=1',
	beforeSend: function() {
	success: function(data) {
  return false;

When click form’s submit button, a small icon display to replace the submit button in case multi-submit.
The ajax data is fetched and place into <div id=”div_sort_pagination”>; then the small icon disappear while submit button shows.

The 2 parts work excellent, in FF, Chrome, and IE. By the way, IE8 is much better than its sibling previous version.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: