Click here to Skip to main content
15,884,176 members
Articles / Web Development / ASP.NET

AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in

Rate me:
Please Sign up or sign in to vote.
4.95/5 (256 votes)
10 Feb 2013MIT19 min read 4.9M   55.5K   575  
Creating AJAX based CRUD tables using ASP.NET MVC 3 and the jTable jQuery plug-in.
div.jtable-main-container{position:relative}div.jtable-main-container div.jtable-title{position:relative;text-align:left}div.jtable-main-container div.jtable-title .jtable-close-button{right:0;top:0;bottom:0;position:absolute}div.jtable-main-container table.jtable{width:100%}div.jtable-main-container table.jtable thead th{vertical-align:middle;text-align:left}div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container{position:relative}div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container span.jtable-column-header-text{display:inline-block}div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container div.jtable-column-resize-handler{position:absolute;height:24px;width:8px;right:-8px;top:-2px;z-index:2;cursor:col-resize}div.jtable-main-container table.jtable thead th.jtable-command-column-header{text-align:center}div.jtable-main-container table.jtable thead th.jtable-column-header-selecting{text-align:center;width:1%}div.jtable-main-container table.jtable thead th.jtable-column-header-selecting input{cursor:pointer}div.jtable-main-container table.jtable thead th.jtable-column-header-sortable{cursor:pointer}div.jtable-main-container table.jtable tbody tr>td .jtable-command-button{margin:0;padding:0;cursor:pointer;border:none;display:inline}div.jtable-main-container table.jtable tbody tr>td .jtable-command-button span{display:none}div.jtable-main-container table.jtable tbody tr>td.jtable-command-column{text-align:center;vertical-align:middle}div.jtable-main-container table.jtable tbody tr>td.jtable-selecting-column{text-align:center;vertical-align:middle}div.jtable-main-container table.jtable tbody tr>td.jtable-selecting-column input{cursor:pointer}div.jtable-main-container table.jtable tbody tr.jtable-no-data-row{text-align:center}div.jtable-main-container div.jtable-bottom-panel{position:relative;min-height:24px}div.jtable-main-container div.jtable-bottom-panel div.jtable-left-area{left:0;top:0;bottom:0;position:absolute}div.jtable-main-container div.jtable-bottom-panel div.jtable-right-area{right:0;top:0;bottom:0;position:absolute}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list{display:inline-block}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active{padding:2px 5px;display:inline-block;cursor:pointer}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active{cursor:default}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-info{display:inline-block;margin-left:5px;padding:2px}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record{display:inline-block}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a{text-decoration:none}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a:hover{text-decoration:underline}div.jtable-main-container div.jtable-column-resize-bar{opacity:.5;filter:alpha(opacity=50);position:absolute;display:none;width:1px;background-color:#000}div.jtable-main-container div.jtable-column-selection-container{position:absolute;display:none;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list{margin:0;padding:0;list-style:none}div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li{margin:0;padding:2px 0}div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"]{cursor:pointer}form.jtable-dialog-form div.jtable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.jtable-dialog-form div.jtable-input-field-container:last-child{border:none}form.jtable-dialog-form div.jtable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.jtable-dialog-form div.jtable-input{padding:2px}form.jtable-dialog-form div.jtable-date-input{}form.jtable-dialog-form div.jtable-text-input{}form.jtable-dialog-form span.jtable-option-text-clickable{position:relative;top:-2px}form.jtable-dialog-form div.jtable-textarea-input textarea{width:300px;min-height:60px}form.jtable-dialog-form div.jtable-checkbox-input span,form.jtable-dialog-form div.jtable-radio-input span{padding-left:4px}form.jtable-dialog-form div.jtable-radio-input input,form.jtable-dialog-form div.jtable-checkbox-input input,form.jtable-dialog-form span.jtable-option-text-clickable{cursor:pointer}div.jtable-busy-panel-background{opacity:.1;filter:alpha(opacity=50);z-index:998;position:absolute;background-color:#000}div.jtable-busy-message{cursor:wait;z-index:999;position:absolute;margin:5px;font-size:1.25em;color:#000;background-color:#ddd}div.jtable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}div.jtable-main-container{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;font-weight:400;color:#222}div.jtable-main-container div.jtable-title{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;line-height:34px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.5);padding-left:10px;border:1px solid}div.jtable-main-container div.jtable-title div.jtable-title-text{font-weight:bold}div.jtable-main-container div.jtable-title .jtable-close-button{right:6px;top:6px;bottom:6px;position:absolute;opacity:.8;filter:alpha(opacity=50);background:url('../../lightcolor/close.png') no-repeat;width:22px;height:22px}div.jtable-main-container div.jtable-title .jtable-close-button:hover{opacity:1;filter:alpha(opacity=50)}div.jtable-main-container table.jtable{border-collapse:collapse;border-spacing:0;border:1px solid #c8c8c8}div.jtable-main-container table.jtable thead{background:url('../../lightcolor/bg-thead.png') repeat-x scroll top left #ddd;border-top:1px solid #fff;border-bottom:1px solid #c8c8c8}div.jtable-main-container table.jtable thead th{padding:4px 3px 4px 6px;border-left:1px solid #fff;border-right:1px solid #c8c8c8}div.jtable-main-container table.jtable thead th:first-child{border-left:none}div.jtable-main-container table.jtable thead thth:last-child{border-right:none}div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container{height:20px}div.jtable-main-container table.jtable thead th.jtable-column-header span.jtable-column-header-text{margin-top:3px}div.jtable-main-container table.jtable thead th.jtable-column-header-selecting{padding:5px}div.jtable-main-container table.jtable thead th.jtable-column-header-sortable div.jtable-column-header-container{background:url('../../lightcolor/column-sortable.png') no-repeat right}div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-asc div.jtable-column-header-container{background:url('../../lightcolor/column-asc.png') no-repeat right}div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-desc div.jtable-column-header-container{background:url('../../lightcolor/column-desc.png') no-repeat right}div.jtable-main-container table.jtable tbody>tr{padding:2px;background:#f8f8f8;height:30px}div.jtable-main-container table.jtable tbody>tr>td{padding:5px;border-left:1px dotted #bebebe}div.jtable-main-container table.jtable tbody>tr>td:first-child{border-left:none}div.jtable-main-container table.jtable tbody>tr>td .jtable-edit-command-button{background:url('../../lightcolor/edit.png') no-repeat;width:16px;height:16px}div.jtable-main-container table.jtable tbody>tr>td .jtable-delete-command-button{background:url('../../lightcolor/delete.png') no-repeat;width:16px;height:16px}div.jtable-main-container table.jtable tbody>tr.jtable-row-even{background:#f0f0f0}div.jtable-main-container table.jtable tbody>tr:hover{background:#e8eaef}div.jtable-main-container table.jtable tbody>tr.jtable-row-selected{-webkit-text-shadow:0 1px 0 #333;text-shadow:0 1px 0 #333;color:#fcfcfc}div.jtable-main-container table.jtable tbody>tr.jtable-child-row>td{background-color:#ababab;padding:1px 0}div.jtable-main-container table.jtable tbody>tr.jtable-child-row>td .jtable{border:none;border-bottom:1px solid #c8c8c8}div.jtable-main-container table.jtable tbody>tr.jtable-child-row>td .jtable-title,div.jtable-main-container table.jtable tbody>tr.jtable-child-row>td .jtable-bottom-panel{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:none}div.jtable-main-container div.jtable-bottom-panel{-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;padding:1px;background:#fff;border:1px solid #c8c8c8;border-top:none;min-height:24px;line-height:16px;font-size:.9em}div.jtable-main-container div.jtable-bottom-panel div.jtable-right-area{padding:2px}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list{margin:2px}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active{-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;background-color:#ebebeb;border-style:solid;border-width:1px;border-color:#fff #b5b5b5 #b5b5b5 #fff;padding:2px 5px}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number:hover,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:hover,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:hover,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:hover,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:hover{background-color:#ddd}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active{-webkit-text-shadow:0 1px 0 #666;text-shadow:0 1px 0 #666;color:#fcfcfc}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-info{margin-left:5px;padding:2px}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record{margin:3px}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a{font-weight:bold;text-decoration:none}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a:hover{text-decoration:underline}div.jtable-main-container div.jtable-column-selection-container{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 4px rgba(50,51,50,.75);-moz-box-shadow:2px 2px 4px rgba(50,51,50,.75);box-shadow:2px 2px 4px rgba(50,51,50,.75)}form.jtable-dialog-form{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;font-weight:400}form.jtable-dialog-form div.jtable-input-label{font-weight:bold}div.jtable-busy-message{-webkit-text-shadow:0 1px 0 #333;text-shadow:0 1px 0 #333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 4px rgba(50,51,50,.75);-moz-box-shadow:2px 2px 4px rgba(50,51,50,.75);box-shadow:2px 2px 4px rgba(50,51,50,.75);color:#fff;border:1px solid;padding:3px 5px 5px 27px;background:url('../../lightcolor/gray/loading.gif') no-repeat;background-position:5px}div.jtable-main-container div.jtable-title{background:#e8e8e8;background:-moz-linear-gradient(top,#e8e8e8 0%,#bababa 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e8e8e8),color-stop(100%,#bababa));background:-webkit-linear-gradient(top,#e8e8e8 0%,#bababa 100%);background:-o-linear-gradient(top,#e8e8e8 0%,#bababa 100%);background:-ms-linear-gradient(top,#e8e8e8 0%,#bababa 100%);background:linear-gradient(to bottom,#e8e8e8 0%,#bababa 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8',endColorstr='#bababa',GradientType=0);border-color:#949494}div.jtable-main-container div.jtable-title div.jtable-title-text{-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;color:#000}div.jtable-main-container table.jtable tbody>tr.jtable-row-selected,div.jtable-main-container table.jtable tbody>tr.jtable-row-selected:hover{background-color:#8e8e8e}div.jtable-main-container table.jtable tbody>tr.jtable-row-created,div.jtable-main-container table.jtable tbody>tr.jtable-row-updated,div.jtable-main-container table.jtable tbody>tr.jtable-row-deleting{background-color:#8e8e8e}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active{background-color:#8e8e8e;border-color:#6c6c6c}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a{color:#5f5f5f}div.jtable-busy-message{border-color:#5f5f5f;background-color:#8e8e8e}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Founder Volosoft
Turkey Turkey
I have started programming at 14 years old using Pascal as hobby. Then I interested in web development (HTML, JavaScript, ASP...) before university.

I graduated from Sakarya University Computer Engineering. At university, I learned C++, Visual Basic.NET, C#, ASP.NET and Java. I partly implemented ARP, IP and TCP protocols in Java as my final term project.

Now, I am working on Windows and web based software development mostly using Microsoft technologies in my own company.

My open source projects:

* ABP Framework: https://abp.io
* jTable: http://jtable.org
* Others: https://github.com/hikalkan

My personal web site:

https://halilibrahimkalkan.com

Comments and Discussions