jTable.org

A JQuery plugin to create AJAX based CRUD tables.

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



Selected rows (refreshed on selectionChanged event):
No row selected! Select rows to see here...


HTML code

<div id="StudentTableContainer"></div>

Javascript code

<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#StudentTableContainer').jtable({
            title: 'Student List',
            paging: true,
            sorting: true,
            defaultSorting: 'Name ASC',
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            //selectOnRowClick: false, //Enable this to only select using checkboxes
            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: '23%',
                    inputClass: 'validate[required]'
                },
                EmailAddress: {
                    title: 'Email address',
                    list: false,
                    inputClass: 'validate[required,custom[email]]'
                },
                Password: {
                    title: 'User Password',
                    type: 'password',
                    list: false,
                    inputClass: 'validate[required]'
                },
                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',
                    inputClass: 'validate[required,custom[date]]'
                },
                Education: {
                    title: 'Education',
                    list: false,
                    type: 'radiobutton',
                    options: { '1': 'Primary school', '2': 'High school', '3': 'University' },
                    inputClass: 'validate[required]'
                },
                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
                }
            },
            //Register to selectionChanged event to hanlde events
            selectionChanged: function () {
                //Get all selected rows
                var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');

                $('#SelectedRowList').empty();
                if ($selectedRows.length > 0) {
                    //Show selected rows
                    $selectedRows.each(function () {
                        var record = $(this).data('record');
                        $('#SelectedRowList').append(
                            '<b>StudentId</b>: ' + record.StudentId +
                            '<br /><b>Name</b>:' + record.Name + '<br /><br />'
                            );
                    });
                } else {
                    //No rows selected
                    $('#SelectedRowList').append('No row selected! Select rows to see here...');
                }
            },
            rowInserted: function (event, data) {
                if (data.record.Name.indexOf('Andrew') >= 0) {
                    $('#StudentTableContainer').jtable('selectRows', data.row);
                }
            }
        });

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

        //Delete selected students
        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');
            $('#StudentTableContainer').jtable('deleteRows', $selectedRows);
        });
    });
   
</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.