Right click the table header to select columns. Column hide/show is enabled as default.
<div id="StudentTableContainer"></div>
<script type="text/javascript"> $(document).ready(function () { $('#StudentTableContainer').jtable({ tableId: 'MyDemoTable', title: 'Student List', paging: true, sorting: true, columnResizable: true, //Actually, no need to set true since it's default columnSelectable: true, //Actually, no need to set true since it's default saveUserPreferences: true, //Actually, no need to set true since it's default defaultSorting: 'Name ASC', actions: { listAction: '/Demo/StudentList', deleteAction: '/Demo/DeleteStudent', updateAction: '/Demo/UpdateStudent', createAction: '/Demo/CreateStudent' }, fields: { StudentId: { key: true, create: false, edit: false, title: 'Id', width: '5%', sorting: false, list: false }, Name: { title: 'Name', width: '20%', visibility: 'fixed' //This column always will be shown }, EmailAddress: { title: 'Email address', width: '20%', list: true }, Password: { title: 'User Password', type: 'password', list: false }, Gender: { title: 'Gender', width: '13%', options: { 'M': 'Male', 'F': 'Female' }, list: true, visibility: 'hidden' //Hide this column as default }, CityId: { title: 'City', width: '12%', options: '/Demo/GetCityOptions' list: false }, BirthDate: { title: 'Birth date', width: '30%', 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', list: false }, RecordDate: { title: 'Record date', width: '30%', type: 'date', displayFormat: 'yy-mm-dd', create: false, edit: false, sorting: false //This column is not sortable! } } }); //Load student list from server $('#StudentTableContainer').jtable('load'); }); </script>
public class DemoController : Controller { //... [HttpPost] public JsonResult StudentList(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null) { try { //Get data from database int studentCount = _repository.StudentRepository.GetStudentCount(); List<Student> students = _repository.StudentRepository.GetStudents(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 StudentList(int jtStartIndex, int jtPageSize, string jtSorting) { try { //Get data from database int studentCount = _repository.StudentRepository.GetStudentCount(); List<Student> students = _repository.StudentRepository.GetStudents(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...