<div id="StudentTableContainer"></div>
<script type="text/javascript"> $(document).ready(function () { $('#StudentTableContainer').jtable({ title: 'Student List', paging: true, //Enable paging sorting: true, //Enable sorting defaultSorting: 'Name ASC', //openChildAsAccordion: true, //Enable this line to show child tabes as accordion style actions: { listAction: '/Demo/StudentList', deleteAction: '/Demo/DeleteStudent', updateAction: '/Demo/UpdateStudent', createAction: '/Demo/CreateStudent")' }, fields: { StudentId: { key: true, create: false, edit: false, list: false }, //CHILD TABLE DEFINITION FOR "PHONE NUMBERS" Phones: { title: '', width: '5%', sorting: false, edit: false, create: false, display: function (studentData) { //Create an image that will be used to open child table var $img = $('<img src="/Content/images/Misc/phone.png" title="Edit phone numbers" />'); //Open child table when user clicks the image $img.click(function () { $('#StudentTableContainer').jtable('openChildTable', $img.closest('tr'), { title: studentData.record.Name + ' - Phone numbers', actions: { listAction: '/Demo/PhoneList?StudentId=' + studentData.record.StudentId, deleteAction: '/Demo/DeletePhone', updateAction: '/Demo/UpdatePhone', createAction: '/Demo/CreatePhone' }, fields: { StudentId: { type: 'hidden', defaultValue: studentData.record.StudentId }, PhoneId: { key: true, create: false, edit: false, list: false }, PhoneType: { title: 'Phone type', width: '30%', options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' } }, Number: { title: 'Phone Number', width: '30%' }, RecordDate: { title: 'Record date', width: '20%', type: 'date', displayFormat: 'yy-mm-dd', create: false, edit: false } } }, function (data) { //opened handler data.childTable.jtable('load'); }); }); //Return image to show on the person row return $img; } }, //CHILD TABLE DEFINITION FOR "EXAMS" Exams: { title: '', width: '5%', sorting: false, edit: false, create: false, display: function (studentData) { //Create an image that will be used to open child table var $img = $('<img src="/Content/images/Misc/note.png" title="Edit exam results" />'); //Open child table when user clicks the image $img.click(function () { $('#StudentTableContainer').jtable('openChildTable', $img.closest('tr'), //Parent row { title: studentData.record.Name + ' - Exam Results', actions: { listAction: '/Demo/ExamList?StudentId=' + studentData.record.StudentId, deleteAction: '/Demo/DeleteExam', updateAction: '/Demo/UpdateExam', createAction: '/Demo/CreateExam' }, fields: { StudentId: { type: 'hidden', defaultValue: studentData.record.StudentId }, StudentExamId: { key: true, create: false, edit: false, list: false }, CourseName: { title: 'Course name', width: '40%' }, ExamDate: { title: 'Exam date', width: '30%', type: 'date', displayFormat: 'yy-mm-dd' }, Degree: { title: 'Degree', width: '10%', options: ["AA", "BA", "BB", "CB", "CC", "DC", "DD", "FF"] } } }, function (data) { //opened handler data.childTable.jtable('load'); }); }); //Return image to show on the person row return $img; } }, Name: { title: 'Name', width: '20%' }, EmailAddress: { title: 'Email address', list: false }, Password: { title: 'User Password', type: 'password', list: false }, Gender: { title: 'Gender', width: '11%', 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: '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 { //... #region Student actions [HttpPost] public JsonResult StudentList(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null) { try { //Get data from database var studentCount = _repository.StudentRepository.GetStudentCount(); var students = _repository.StudentRepository.GetStudents(jtStartIndex, jtPageSize, jtSorting); //Return results 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." }); } var 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 { Thread.Sleep(50); _repository.StudentRepository.DeleteStudent(studentId); return Json(new { Result = "OK" }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } #endregion #region City actions [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 }); } } #endregion #region Phone actions [HttpPost] public JsonResult PhoneList(int studentId) { try { Thread.Sleep(200); var phones = _repository.PhoneRepository.GetPhonesOfStudent(studentId); return Json(new { Result = "OK", Records = phones }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } [HttpPost] public JsonResult DeletePhone(int phoneId) { try { Thread.Sleep(50); _repository.PhoneRepository.DeletePhone(phoneId); return Json(new { Result = "OK" }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } [HttpPost] public JsonResult UpdatePhone(Phone phone) { try { if (!ModelState.IsValid) { return Json(new { Result = "ERROR", Message = "Form is not valid! Please correct it and try again." }); } _repository.PhoneRepository.UpdatePhone(phone); return Json(new { Result = "OK" }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } [HttpPost] public JsonResult CreatePhone(Phone phone) { try { if (!ModelState.IsValid) { return Json(new { Result = "ERROR", Message = "Form is not valid! Please correct it and try again." }); } var addedPhone = _repository.PhoneRepository.AddPhone(phone); return Json(new { Result = "OK", Record = addedPhone }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } #endregion #region Exam actions [HttpPost] public JsonResult ExamList(int studentId) { try { Thread.Sleep(200); var exams = _repository.ExamRepository.GetExamsOfStudent(studentId).OrderBy(e => e.ExamDate).ToList(); return Json(new { Result = "OK", Records = exams }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } [HttpPost] public JsonResult DeleteExam(int studentExamId) { try { Thread.Sleep(50); _repository.ExamRepository.DeleteExam(studentExamId); return Json(new { Result = "OK" }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } [HttpPost] public JsonResult UpdateExam(StudentExam exam) { try { if (!ModelState.IsValid) { return Json(new { Result = "ERROR", Message = "Form is not valid! Please correct it and try again." }); } _repository.ExamRepository.UpdateExam(exam); return Json(new { Result = "OK" }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } [HttpPost] public JsonResult CreateExam(StudentExam exam) { try { if (!ModelState.IsValid) { return Json(new { Result = "ERROR", Message = "Form is not valid! Please correct it and try again." }); } var addedExam = _repository.ExamRepository.AddExam(exam); return Json(new { Result = "OK", Record = addedExam }); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } #endregion }
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 { //... #region Student methods [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 }; } } #endregion #region City methods [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 }; } } #endregion #region Phone methods [WebMethod(EnableSession = true)] public static object PhoneList(int StudentId) { try { var phones = _repository.PhoneRepository.GetPhonesOfStudent(StudentId); return new { Result = "OK", Records = phones }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } [WebMethod(EnableSession = true)] public static object DeletePhone(int PhoneId) { try { _repository.PhoneRepository.DeletePhone(PhoneId); return new { Result = "OK" }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } [WebMethod(EnableSession = true)] public static object UpdatePhone(Phone record) { try { _repository.PhoneRepository.UpdatePhone(record); return new { Result = "OK" }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } [WebMethod(EnableSession = true)] public static object CreatePhone(Phone record) { try { var addedPhone = _repository.PhoneRepository.AddPhone(record); return new { Result = "OK", Record = addedPhone }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } #endregion #region Exam actions [WebMethod(EnableSession = true)] public static object ExamList(int StudentId) { try { var exams = _repository.ExamRepository.GetExamsOfStudent(StudentId).OrderBy(e => e.ExamDate).ToList(); return new { Result = "OK", Records = exams }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } [WebMethod(EnableSession = true)] public static object DeleteExam(int StudentExamId) { try { _repository.ExamRepository.DeleteExam(StudentExamId); return new { Result = "OK" }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } [WebMethod(EnableSession = true)] public static object UpdateExam(StudentExam record) { try { _repository.ExamRepository.UpdateExam(record); return new { Result = "OK" }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } [WebMethod(EnableSession = true)] public static object CreateExam(StudentExam record) { try { var addedExam = _repository.ExamRepository.AddExam(record); return new { Result = "OK", Record = addedExam }; } catch (Exception ex) { return new { Result = "ERROR", Message = ex.Message }; } } #endregion }
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...