Below is the description about CRUD Operation using datatable.js in asp.net mvc. below is the step by step code for that.
View
Changes
Add
below style sheet and javascript in view.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
// bootstrap
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
// dataTables
<link
rel="stylesheet"
href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"/>
// dataTables.buttons
<link
rel="stylesheet"
href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"/>
// dataTables.select
<link
rel="stylesheet"
href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"/>
// dataTables.responsive
<script
src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
// jQuery
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
// bootstrap
<script
src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
// dataTables
<script
src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
// dataTables.buttons
<script
src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
// dataTables.select
<script
src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<script
src="js/altEditor/dataTables.altEditor.free.js"></script>
// dataTables.altEditor
script to call datatable
<script
type="text/javascript">
$(document).ready(function
() {
$('#tblCompanylist').dataTable({
"sPaginationType":
"full_numbers",
"bPaginate":
true,
"iDisplayLength":
25,
"scrollX":
true,
responsive:
true,
altEditor:
true,
dom:
'Bfrtip', // Needs button container
select:
'single',
responsive:
true,
altEditor:
true, // Enable altEditor
buttons:
[{
text:
'Add',
name:
'add' // do not change name
},
{
extend:
'selected', // Bind to Selected row
text:
'Edit',
name:
'edit' // do not change name
}]
});
});
</script>
Html changes
<div
id="divCompanylist" style="padding-top: 60px;">
<table
id="tblCompanylist" class="display dataTable"
cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Customer
Number</th>
<th>Website
Url</th>
<th>Logo
File Name</th>
<th>Company
Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Zip
Code</th>
</tr>
</thead>
<tbody>
@foreach
(var item in Model)
{
<tr
id="@item.CompanyId">
<td>@item.CompanyId</td>
<td>@item.CustomerNumber</td>
<td>@item.WebsiteUrl</td>
<td>@item.LogoFileName</td>
<td>@item.CompanyName</td>
<td>@item.Street</td>
<td>@item.City</td>
<td>@item.State</td>
<td>@item.ZipCode</td>
</tr>
}
</tbody>
</table>
</div>
Controller changes
Add
below methods in controller
public
void
UpdateData(int
id, int
CustomerNumber, string
WebsiteUrl, string
LogoFileName, string
CompanyName, string
Street, string
City, string
State,
string
ZipCode
)
{
CompanyDAO
_companyInfo = new
CompanyDAO();
var
companies = _companyInfo.GetAllCompanyInformation();
CompanyInformation
companyRow = new
CompanyInformation();
companyRow.CompanyId
= id;
companyRow.CustomerNumber
= CustomerNumber.ToString();
companyRow.WebsiteUrl
= WebsiteUrl;
companyRow.LogoFileName
= LogoFileName;
companyRow.CompanyName
= CompanyName;
companyRow.Street
= Street;
companyRow.City
= City;
companyRow.State
= State;
companyRow.ZipCode
= ZipCode;
companyRow.CompanyPhone
= CompanyPhone;
companyRow.IsActive
= true;
_companyInfo.SaveCompany(companyRow,
1);
}
public
void
AddData(int
id, int
CustomerNumber, string
WebsiteUrl, string
LogoFileName, string
CompanyName, string
Street, string
City, string
State,
string
ZipCode, string
CompanyPhone)
{
CompanyDAO
_companyInfo = new
CompanyDAO();
var
companies = _companyInfo.GetAllCompanyInformation();
CompanyInformation
companyRow = new
CompanyInformation();
companyRow.CustomerNumber
= CustomerNumber.ToString();
companyRow.WebsiteUrl
= WebsiteUrl;
companyRow.LogoFileName
= LogoFileName;
companyRow.CompanyName
= CompanyName;
companyRow.Street
= Street;
companyRow.City
= City;
companyRow.State
= State;
companyRow.ZipCode
= ZipCode;
companyRow.CompanyPhone
= CompanyPhone;
_companyInfo.SaveCompany(companyRow,
0);
}
download
dataTables.altEditor.free.js
from internet if do not find send me email.
The
main changes are in dataTables.altEditor.free.js to make ajax call
for add and update.
On
click of add button _addRowData
function is called so create ajax call or any other extra operation
you want to do you can change here. In this function I have added
code of validation and save into database code.
if
(data[1] == "")
{
alert("Please
enter customer number");
return
false;
}
if
(data[2] == "")
{
alert("Please
enter website url");
return
false;
}
if
(data[4] == "")
{
alert("Please
enter company name");
return
false;
}
$.ajax({
url:
"/company/AddData",
type:
"GET",
data:
{
id:
data[0], CustomerNumber: data[1], WebsiteUrl: data[2], LogoFileName:
data[3], CompanyName: data[4],
Street:
data[5], City: data[6], State: data[7], ZipCode: data[8],
CompanyPhone: data[9]
},
success:
function
(response) {
$('#altEditor-modal
.modal-body .alert').remove();
var
message = '<div
class="alert alert-success" role="alert">\
<strong>Success!</strong>
This record has been added.\
</div>';
$('#altEditor-modal
.modal-body').append(message);
}
});
same
thing I did for edit. For edit _editRowData
function is called.
if
(data[1] == "")
{
alert("Please
enter customer number");
return
false;
}
if
(data[2] == "")
{
alert("Please
enter website url");
return
false;
}
if
(data[4] == "")
{
alert("Please
enter company name");
return
false;
}
$.ajax({
url:
"/company/UpdateData",
type:
"GET",
data:
{ id: data[0], CustomerNumber: data[1], WebsiteUrl: data[2],
LogoFileName: data[3], CompanyName: data[4],
Street:
data[5], City: data[6], State: data[7],ZipCode: data[8],
CompanyPhone: data[9] },
success:
function
(response) {
$('#altEditor-modal
.modal-body .alert').remove();
var
message = '<div
class="alert alert-success" role="alert">\
<strong>Success!</strong>
This record has been updated.\
</div>';
$('#altEditor-modal
.modal-body').append(message);
}
});
