jTable.org

A JQuery plugin to create AJAX based CRUD tables.

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


HTML code

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

Javascript code

<script type="text/javascript">

    $(document).ready(function () {

        //Localization texts
        var turkishMessages = {
            serverCommunicationError: 'Sunucu ile iletişim kurulurken bir hata oluştu.',
            loadingMessage: 'Kayıtlar yükleniyor...',
            noDataAvailable: 'Hiç kayıt bulunmamaktadır!',
            addNewRecord: '+ Yeni kayıt ekle',
            editRecord: 'Kayıt düzenle',
            areYouSure: 'Emin misiniz?',
            deleteConfirmation: 'Bu kayıt silinecektir. Emin misiniz?',
            save: 'Kaydet',
            saving: 'Kaydediyor',
            cancel: 'İptal',
            deleteText: 'Sil',
            deleting: 'Siliyor',
            error: 'Hata',
            close: 'Kapat',
            cannotLoadOptionsFor: '{0} alanı için seçenekler yüklenemedi!',
            pagingInfo: 'Toplam {2}, {0} ile {1} arası gösteriliyor',
            canNotDeletedRecords: '{1} kayıttan {0} adedi silinemedi!',
            deleteProggress: '{1} kayıttan {0} adedi silindi, devam ediliyor...'
        };

        $('#StudentTableContainer').jtable({
            messages: turkishMessages, //Lozalize
            title: 'Öğrenci Listesi',
            paging: true,
            sorting: true,
            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: 'İsim',
                    width: '23%'
                },
                EmailAddress: {
                    title: 'E-posta adresi',
                    list: false
                },
                Password: {
                    title: 'Şifre',
                    type: 'password',
                    list: false,
                    inputClass: 'validate[required]'
                },
                Gender: {
                    title: 'Cinsiyet',
                    width: '13%',
                    options: { 'M': 'Male', 'F': 'Female' }
                },
                CityId: {
                    title: 'Şehir',
                    width: '12%',
                    options: '/Demo/GetCityOptions'
                },
                BirthDate: {
                    title: 'Doğum',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                },
                Education: {
                    title: 'Eğitim',
                    list: false,
                    type: 'radiobutton',
                    options: { '1': 'İlkokul', '2': 'Lise', '3': 'Üniversite' }
                },
                About: {
                    title: 'Bu kişi hakkında',
                    type: 'textarea',
                    list: false
                },
                IsActive: {
                    title: 'Durum',
                    width: '12%',
                    type: 'checkbox',
                    values: { 'false': 'Aktif', 'true': 'Pasif' },
                    defaultValue: 'true'
                },
                RecordDate: {
                    title: 'Kayıt tarihi',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    create: false,
                    edit: false,
                    sorting: false
                }
            }
        });

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

Click here to get more information about localization.

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...