jTable.org

A JQuery plugin to create AJAX based CRUD tables.

Demos | Documentation | Discussion | Themes | Downloads | About
jTable on GitHub Github


HTML code

<!-- Import CSS file for validation engine (in Head section of HTML) -->
<link href="/Scripts/validationEngine/validationEngine.jquery.css" rel="stylesheet" type="text/css" />

<!-- Import Javascript files for validation engine (in Head section of HTML) -->
<script type="text/javascript" src="/Scripts/validationEngine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/Scripts/validationEngine/jquery.validationEngine-en.js"></script>

<!-- Container for jTable -->
<div id="StudentTableContainer"></div>

Javascript code

<script type="text/javascript">

    $(document).ready(function () {

        $('#StudentTableContainer').jtable({
            title: 'Student List',
            paging: true, //Enable paging
            sorting: true, //Enable sorting
            defaultSorting: 'Name ASC',
            actions: {
                listAction: '/Demo/StudentList',
                deleteAction: '/Demo/DeleteStudent',
                updateAction: '/Demo/UpdateStudent',
                createAction: '/Demo/CreateStudent'
            },
            fields: {
                StudentId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Name: {
                    title: 'Name',
                    width: '15%'
                },
                EmailAddress: {
                    title: 'Email address',
                    list: false
                },
                Password: {
                    title: 'User Password',
                    type: 'password',
                    list: false
                },
                Gender: {
                    title: 'Gender',
                    width: '12%',
                    options: { 'M': 'Male', 'F': 'Female' }
                },
                CityId: {
                    title: 'Living city',
                    width: '15%',
                    options: '/Demo/GetCityOptions'
                },
                BirthDate: {
                    title: 'Birth date',
                    width: '18%',
                    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: '10%',
                    type: 'checkbox',
                    values: { 'false': 'Passive', 'true': 'Active' },
                    defaultValue: 'true'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '18%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    create: false,
                    edit: false
                }
            },
			//Initialize validation logic when a form is created
            formCreated: function (event, data) {
                data.form.find('input[name="Name"]').addClass('validate[required]');
                data.form.find('input[name="EmailAddress"]').addClass('validate[required,custom[email]]');
                data.form.find('input[name="Password"]').addClass('validate[required]');
                data.form.find('input[name="BirthDate"]').addClass('validate[required,custom[date]]');
                data.form.find('input[name="Education"]').addClass('validate[required]');
                data.form.validationEngine();
            },
			//Validate form when it is being submitted
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
			//Dispose validation logic when form is closed
            formClosed: function (event, data) {
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            }
        });

        //Load student list from server
        $('#StudentTableContainer').jtable('load');
    });

</script>

Server side code

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!

ASP.NET Zero screenshot Based on metronic theme, includes pre-built pages like login, register, tenant, role, user, permission and setting management. Learn more...