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

CRUD tables in WebMatrix using jTable jQuery plugin

Rate me:
Please Sign up or sign in to vote.
4.87/5 (12 votes)
23 May 2013CPOL4 min read 94K   2.4K   31  
A working example of a jTable implementation in WebMatrix 3
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 div.jtable-title div.jtable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;vertical-align:bottom}div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.jtable-main-container div.jtable-title .jtable-close-button+div.jtable-toolbar{margin-right:30px}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;text-align:left}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,div.jtable-main-container>div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled{cursor:default}div.jtable-main-container>div.jtable-bottom-panel span.jtable-page-size-change{margin-left:5px}div.jtable-main-container>div.jtable-bottom-panel span.jtable-goto-page{margin-left:5px}div.jtable-main-container>div.jtable-bottom-panel span.jtable-goto-page input[type=text]{width:22px}div.jtable-main-container>div.jtable-bottom-panel span.jtable-page-info{vertical-align:middle}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-panel-background.jtable-busy-panel-background-invisible{background-color:transparent}div.jtable-busy-message{cursor:wait;z-index:999;position:absolute;margin:5px}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;position:relative;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 div.jtable-title div.jtable-toolbar{bottom:0;right:0;position:absolute;line-height:26px}div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item.jtable-toolbar-item-add-record span.jtable-toolbar-item-icon{background-image:url('../../lightcolor/add.png')}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:#bbb;padding:2px 1px 2px 2px}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-number-disabled{opacity:.5;filter:alpha(opacity=50)}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled.jtable-page-number-active{opacity:1;filter:alpha(opacity=50)}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled:hover{background-color:#ebebeb}div.jtable-main-container div.jtable-bottom-panel .jtable-page-info{display:inline-block;padding:4px}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/red/loading.gif') no-repeat;background-position:5px}div.jtable-main-container div.jtable-title{background:#eb6565;background:-moz-linear-gradient(top,#eb6565 0%,#9d0d0d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eb6565),color-stop(100%,#9d0d0d));background:-webkit-linear-gradient(top,#eb6565 0%,#9d0d0d 100%);background:-o-linear-gradient(top,#eb6565 0%,#9d0d0d 100%);background:-ms-linear-gradient(top,#eb6565 0%,#9d0d0d 100%);background:linear-gradient(to bottom,#eb6565 0%,#9d0d0d 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb6565',endColorstr='#9d0d0d',GradientType=0);border-color:#772b2b}div.jtable-main-container div.jtable-title div.jtable-title-text{-webkit-text-shadow:0 1px 0 #666;text-shadow:0 1px 0 #666;color:#fff}div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item{color:#fff}div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item.jtable-toolbar-item-hover{background-color:#9a1414}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:#ea2a2a}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:#ea2a2a}div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active,div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active:hover{background-color:#b11515;border-color:#8f0000}div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a{color:#772b2b}div.jtable-busy-message{border-color:#772b2b;background-color:#ea2a2a}

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 Code Project Open License (CPOL)


Written By
Chief Technology Officer Federfarma Pavia
Italy Italy
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions