SmartGrid Demo Page

SmartGrid is a JQuery plugin that presents data in different views (list or tiles) and supports basic features like pagination and search.

Go to GitHub's page

Add Item Remove Item

Code:

HTML:
<div id="users-left"></div>

JavaScript:

$('#users-left').smartGrid({
	viewMode : 'tiles',
	orderByFields : [{'key' : 'name',
			  'label' : 'Name'},
			 {'key' : 'surname',
			  'label' : 'Surname'}],
	orderBy : 'name',
	fnContent : fnContent,
	searchExcludeFields : ['email'],
	itemsPerPage : 4,
	items : [{ "name": "Max",
		   "surname" : "Maximus",
		   "email": "max@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Mia",
		   "surname" : "Mulleard",
		   "email": "mimi@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Philip",
		   "surname" : "Fenix",
		   "email": "phil@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Garry JJ",
		   "surname" : "Rowst",
		   "email": "garry@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Mary",
		   "surname" : "Jane",
		   "email": "mj@email.co.uk",
		   "phone" : "01223 124556" }],
		});

$('#bt_add_item').click(function(){
	var sg = $('#users-left').data('smartGrid'); 
	sg.addItem({
		"name" : "Harold",
		"surname" : "Giraffe",
		"email" : "harold@email.co.uk",
		"phone" : "01223 777777"
	});
});

$('#bt_rm_item').click(function(){
	var sg = $('#users-left').data('smartGrid'); 
	sg.removeItem({"key": "name",
		       "value" : "Harold"});
});
		
function fnContent(item, viewMode) {
  if (viewMode == 'tiles') {
    return '<li class="clearfix">\
      <img src="demo/user.png"  class="img-polaroid pull-left"><br>\
      <div class="caption">\
        <h4>'+item.name+' '+item.surname+'</h4>\
        <p>\
          <i class="icon-envelope"></i> '+item.email+' <br>\
          <i class="icon-info-sign"></i> '+item.phone+'\
        </p>\
      </div>\
      </li>'
  } else {
    return '<li class="sg-list">\
    <div class="">\
      <img src="demo/user.png"  class="pull-left user-photo">\
      <p>\
        <strong class="span3">'+item.name+' '+item.surname+'</strong>\
        <label class="pull-right">'+item.email+'</label>\
      </p>\
    </div>\
    </li>'
  }
};

Code:

HTML:
<div id="users-right"></div>

JavaScript:

$('#users-right').smartGrid({
	items : [{ "name": "Jone1",
		   "surname" : "Dae",
		   "email": "Jone1@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Jone4",
		   "surname" : "Doe",
		   "email": "Jone4@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Jone2",
		   "surname" : "Dee",
		   "email": "Jone2@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Jone3",
		   "surname" : "Die",
		   "email": "Jone3@email.co.uk",
		   "phone" : "01223 124556" },
		 { "name": "Jone5",
		   "surname" : "Due",
		   "email": "Jone5@email.co.uk",
		   "phone" : "01223 124556" }],
	fnContent : fnContent,
});

function fnContent(item, viewMode) {
  if (viewMode == 'tiles') {
    return '<li class="clearfix">\
      <img src="demo/user.png"  class="img-polaroid pull-left"><br>\
      <div class="caption">\
        <h4>'+item.name+' '+item.surname+'</h4>\
        <p>\
          <i class="icon-envelope"></i> '+item.email+' <br>\
          <i class="icon-info-sign"></i> '+item.phone+'\
        </p>\
      </div>\
      </li>'
  } else {
    return '<li class="sg-list">\
    <div class="">\
      <img src="demo/user.png"  class="pull-left user-photo">\
      <p>\
        <strong class="span3">'+item.name+' '+item.surname+'</strong>\
        <label class="pull-right">'+item.email+'</label>\
      </p>\
    </div>\
    </li>'
  }
};