This article shows how a datatable with standard CRUD functionalites (select/delete data, update single cell, and add new record) can be created in ASP.NET MVC using the jQuery DataTables Editable plug-in.
- DataTableEditableProject.zip
- DataTableEditable
- bin
- Content
- dataTables
- images
- back_disabled.jpg
- back_enabled.jpg
- favicon.ico
- forward_disabled.jpg
- forward_enabled.jpg
- sort_asc.png
- sort_asc_disabled.png
- sort_both.png
- sort_desc.png
- sort_desc_disabled.png
- Sorting icons.psd
- jAlert
- Site.css
- themes
- base
- images
- ui-bg_flat_0_aaaaaa_40x100.png
- ui-bg_flat_75_ffffff_40x100.png
- ui-bg_glass_55_fbf9ee_1x400.png
- ui-bg_glass_65_ffffff_1x400.png
- ui-bg_glass_75_dadada_1x400.png
- ui-bg_glass_75_e6e6e6_1x400.png
- ui-bg_glass_95_fef1ec_1x400.png
- ui-bg_highlight-soft_75_cccccc_1x100.png
- ui-icons_222222_256x240.png
- ui-icons_2e83ff_256x240.png
- ui-icons_454545_256x240.png
- ui-icons_888888_256x240.png
- ui-icons_cd0a0a_256x240.png
- jquery-ui.css
- smoothness
- images
- ui-bg_flat_0_aaaaaa_40x100.png
- ui-bg_flat_75_ffffff_40x100.png
- ui-bg_glass_55_fbf9ee_1x400.png
- ui-bg_glass_65_ffffff_1x400.png
- ui-bg_glass_75_dadada_1x400.png
- ui-bg_glass_75_e6e6e6_1x400.png
- ui-bg_glass_95_fef1ec_1x400.png
- ui-bg_highlight-soft_75_cccccc_1x100.png
- ui-icons_222222_256x240.png
- ui-icons_2e83ff_256x240.png
- ui-icons_454545_256x240.png
- ui-icons_888888_256x240.png
- ui-icons_cd0a0a_256x240.png
- jquery-ui-1.7.2.custom.css
- Controllers
- DataTableEditable.csproj
- DataTableEditable.csproj.user
- Global.asax
- Global.asax.cs
- Models
- obj
- Debug
- DataTableEditable.dll
- TempPE
- Properties
- Scripts
- Views
- Web.config
- Web.Debug.config
- Web.Release.config
|
@{
ViewBag.Title = "Customization";
Layout = "~/Views/Company/JQueryDataTableEditableLayout.cshtml";
}
@section head{
<script src="@Url.Content("~/Content/jAlert/jquery.alerts.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jAlert/jquery.alerts.css")" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
}).makeEditable({
sUpdateURL: "/Company/UpdateData",
sAddURL: "/Company/AddData",
sDeleteURL: "/Company/DeleteData",
sAddNewRowFormId: "formAddNewCompany",
sAddNewRowButtonId: "btnAddNewCompany",
sAddNewRowOkButtonId: "btnAddNewCompanyOk",
sAddNewRowCancelButtonId: "btnAddNewCompanyCancel",
sDeleteRowButtonId: "btnDeleteCompany",
fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddError").html(message);
$("#lblAddError").show();
break;
}
},
fnStartProcessingMode: function () {
$("#processing_message").dialog();
},
fnEndProcessingMode: function () {
$("#processing_message").dialog("close");
}
});
});
</script>
}
<div id="demo">
<h2>Customization</h2>
<table id="myDataTable" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr id="@item.ID">
<td>@item.Name</td>
<td>@item.Address</td>
<td>@item.Town</td>
</tr>
}
</tbody>
</table>
<button id="btnAddNewCompany" value="Ok">Add new company...</button>
<button id="btnDeleteCompany" value="cancel">Delete selected company</button>
</div>
<div id="processing_message" style="display:none" title="Processing">Please wait while your request is being processed...</div>
<form id="formAddNewCompany" action="#" title="Add new company">
<!-- button id="btnAddNewCompanyOk" value="Ok">Add Company</button>
<button id="btnAddNewCompanyCancel" value="cancel">Cancel</button -->
<label id="lblAddError" class="error"></label>
<br />
<label for="name">Name</label><input type="text" name="name" id="name" class="required" rel="0" />
<br />
<label for="name">Address</label><input type="text" name="address" id="address" rel="1" />
<br />
<label for="name">Postcode</label><input type="text" name="postcode" id="postcode"/>
<br />
<label for="name">Town</label><input type="text" name="town" id="town" rel="2" />
<br />
<label for="name">Country</label><select name="country" id="country">
<option value="1">Serbia</option>
<option value="2">France</option>
<option value="3">Italy</option>
</select>
<br />
</form>
|
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.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia.
Currently working in Microsoft as Program Manager on SQL Server product.
Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Web and databases, Software engineering process(estimation and standardization), mobile and business intelligence platforms.