HTML code
<div class="filtering">
<form>
Name: <input type="text" name="name" id="name" />
City:
<select id="cityId" name="cityId">
<option selected="selected" value="0">All cities</option>
<option value="1">Adana</option>
<option value="2">Ankara</option>
<option value="3">Athens</option>
<option value="4">Beijing</option>
<option value="5">Berlin</option>
<option value="6">Bursa</option>
<option value="7">İstanbul</option>
<option value="8">London</option>
<option value="9">Madrid</option>
<option value="10">Mekke</option>
<option value="11">New York</option>
<option value="12">Paris</option>
<option value="13">Samsun</option>
<option value="14">Trabzon</option>
<option value="15">Volos</option>
</select>
<button type="submit" id="LoadRecordsButton">Load records</button>
</form>
</div>
<div id="StudentTableContainer"></div>
Javascript code
<script type="text/javascript">
$(document).ready(function () {
$('#StudentTableContainer').jtable({
title: 'Student List',
paging: true,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '/Demo/StudentListByFiter',
deleteAction: '/Demo/DeleteStudent',
updateAction: '/Demo/UpdateStudent',
createAction: '/Demo/CreateStudent'
},
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '23%'
},
EmailAddress: {
title: 'Email address',
list: false
},
Password: {
title: 'User Password',
type: 'password',
list: false
},
Gender: {
title: 'Gender',
width: '13%',
options: { 'M': 'Male', 'F': 'Female' }
},
CityId: {
title: 'City',
width: '12%',
options: '/Demo/GetCityOptions'
},
BirthDate: {
title: 'Birth date',
width: '15%',
type: 'date',
displayFormat: 'yy-mm-dd'
},
Education: {
title: 'Education',
list: false,
type: 'radiobutton',
options: { '1': 'Primary school', '2': 'High school', '3': 'University' }
},
About: {
title: 'About this person',
type: 'textarea',
list: false
},
IsActive: {
title: 'Status',
width: '12%',
type: 'checkbox',
values: { 'false': 'Passive', 'true': 'Active' },
defaultValue: 'true'
},
RecordDate: {
title: 'Record date',
width: '15%',
type: 'date',
displayFormat: 'dd.mm.yy',
create: false,
edit: false,
sorting: false //This column is not sortable!
}
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
e.preventDefault();
$('#StudentTableContainer').jtable('load', {
name: $('#name').val(),
cityId: $('#cityId').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
});
</script>
Server side code
public class DemoController : Controller
{
//...
[HttpPost]
public JsonResult StudentListByFiter(string name = "", int cityId = 0, int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
{
try
{
//Get data from database
var studentCount = _repository.StudentRepository.GetStudentCountByFilter(name, cityId);
var students = _repository.StudentRepository.GetStudentsByFilter(name, cityId, jtStartIndex, jtPageSize, jtSorting);
//Return result to jTable
return Json(new { Result = "OK", Records = students, TotalRecordCount = studentCount });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
[HttpPost]
public JsonResult CreateStudent(Student student)
{
try
{
if (!ModelState.IsValid)
{
return Json(new { Result = "ERROR", Message = "Form is not valid! Please correct it and try again." });
}
Student addedStudent = _repository.StudentRepository.AddStudent(student);
return Json(new { Result = "OK", Record = addedStudent });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
[HttpPost]
public JsonResult UpdateStudent(Student student)
{
try
{
if (!ModelState.IsValid)
{
return Json(new { Result = "ERROR", Message = "Form is not valid! Please correct it and try again." });
}
_repository.StudentRepository.UpdateStudent(student);
return Json(new { Result = "OK" });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
[HttpPost]
public JsonResult DeleteStudent(int studentId)
{
try
{
_repository.StudentRepository.DeleteStudent(studentId);
return Json(new { Result = "OK" });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
[HttpPost]
public JsonResult GetCityOptions()
{
try
{
var cities = _repository.CityRepository.GetAllCities().Select(c => new { DisplayText = c.CityName, Value = c.CityId });
return Json(new { Result = "OK", Options = cities });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
}
See "Using jTable with ASP.NET MVC" tutorial for detailed usage.
Download all samples from download page.
public partial class PagingAndSorting : System.Web.UI.Page
{
//...
[WebMethod(EnableSession = true)]
public static object StudentListByFilter(string name, int cityId, int jtStartIndex, int jtPageSize, string jtSorting)
{
try
{
//Get data from database
int studentCount = _repository.StudentRepository.GetStudentCountByFilter(name, cityId);
List<Student> students = _repository.StudentRepository.GetStudentsByFilter(name, cityId, jtStartIndex, jtPageSize, jtSorting);
//Return result to jTable
return new { Result = "OK", Records = students, TotalRecordCount = studentCount };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}
[WebMethod(EnableSession = true)]
public static object CreateStudent(Student record)
{
try
{
var addedStudent = _repository.StudentRepository.AddStudent(record);
return new { Result = "OK", Record = addedStudent };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}
[WebMethod(EnableSession = true)]
public static object UpdateStudent(Student record)
{
try
{
_repository.StudentRepository.UpdateStudent(record);
return new { Result = "OK" };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}
[WebMethod(EnableSession = true)]
public static object DeleteStudent(int StudentId)
{
try
{
_repository.StudentRepository.DeleteStudent(StudentId);
return new { Result = "OK" };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}
[WebMethod(EnableSession = true)]
public static object GetCityOptions()
{
try
{
var cities = _repository.CityRepository.GetAllCities().Select(c => new { DisplayText = c.CityName, Value = c.CityId });
return new { Result = "OK", Options = cities };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}
}
See "Using jTable with ASP.NET Web Forms" tutorial for detailed usage.
Download all samples from download page.
Advertisement: Professional startup template for ASP.NET MVC & AngularJs by creator of jTable!
Based on metronic theme, includes pre-built pages like login, register, tenant, role, user, permission and setting management. Learn more...