Related
using JQuery Datatable we are trying to row grouping and facing the below issue - table header and data is not getting aligned properly as shown in the below image tried setting css property,adjusting the width of the header. but datatable is not taking the width.DataTable grid width issue screenshot
below is the sample code by which we populate the data grid
cshtml code
<html>
<div hidden id="div-summary-table-SelfApp">
<table class="table table-border table-striped table-bordered dt-responsive" width="140%" cellspacing="0" id="summary-table-selfApp" style="border-bottom: none !important;">
<thead>
<tr>
<th colspan="7">#SharedLocalizer.GetLocalizedHtmlString("eventinfo")</th>
<th colspan="6">#SharedLocalizer.GetLocalizedHtmlString("roleInformation")</th>
</tr>
<tr>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("eventID")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("eventname")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("eventdate")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("holdingarea")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("nameofapplicant")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("event_applicationstatus")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("event_reportingstatus")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("performername")</th>
<th rowspan="2">#SharedLocalizer.GetLocalizedHtmlString("nameoffacility")</th>
<th rowspan="1" colspan="4">#SharedLocalizer.GetLocalizedHtmlString("status")</th>
</tr>
<tr>
<th>#SharedLocalizer.GetLocalizedHtmlString("policy")</th>
<th>#SharedLocalizer.GetLocalizedHtmlString("arrangementoftranspotation")</th>
<th>#SharedLocalizer.GetLocalizedHtmlString("slidebeforetheevent")</th>
<th>#SharedLocalizer.GetLocalizedHtmlString("slideontheday")</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</html>
`
js code
`
$("#summary-table-selfApp").DataTable({
"dom": '<"top"li>rt<"bottom"p>',
"scrollX": true,
"ajax": {
"url": "test/data",
"type": "POST",
"dataType": "JSON",
"data": function (filterParam) {
filterParam.EventID = EventIDSA;
filterParam.EventName = EventNameSA;
filterParam.Applicant = ApplicantSA;
filterParam.ApplicantBranchName = ApplicantBranchSA;
filterParam.ApplicantDepartmentName = drpDeptSelfApp;
filterParam.SearchOrganization = OrganizationSA;
filterParam.Status = StatusSA;
filterParam.EventType = EventTypeSA;
filterParam.EventSubType = EventSubTypeSA;
filterParam.HowToHold = HowToHoldSA;
filterParam.HoldingArea = HoldingAreaSA;
filterParam.ProductName = ProductNameSA;
filterParam.HoldingFormat = HoldingFormatSA;
filterParam.Role = isUserId;
filterParam.ExpertName = ExpertNameSA;
filterParam.FacilityName = FacilityNameSA;
filterParam.CostCenter = CostCenterSa;
filterParam.ActivityWBSName = ActivityWBSSA;
filterParam.SearchType = SearchType;
filterParam.UserID = isLoggedId;
filterParam.EventFromDate = EventFrmDate;
filterParam.EventToDate = EventToDate;
filterParam.PersonInCharge = PersonInChargeSA;
filterParam.IsExceptionApp = ExceptionApp;
filterParam.ReportApproval = ReportApproval;
filterParam.MonitoringFrmDate = MonitoringFrmDate;
filterParam.MonitoringToDate = MonitoringToDate;
filterParam.RefetchData = refetchData;
filterParam.SlideBeforeEvent = SlideBeforeEvent;
filterParam.SlideOnTheDay = SlideOnTheDay;
filterParam.ApplicantBusinessUnit = BusinessUnitSA;
},
},
"bServerSide": true,
"pagingType": "full_numbers",
"bFilter": false,
"language": {
"search": "Filter records:",
"paginate": {
"first": "<<",
"previous": "<",
"next": ">",
"last": ">>"
},
"emptyTable": "レコードがありません。",
"lengthMenu": "表示件数 _MENU_/ページ",
"info": "<b>_TOTAL_</b> 件のうち <b>_START_</b> から <b>_END_</b> 件 を表示",
"infoEmpty": ""
},
"rowsGroup": [0, 1, 2, 3, 4, 5, 6],
"drawCallback": function (settings) {
refetchData = false;
if ($(this).find('.dataTables_empty').length == 1) {
$('.dataTables_paginate').hide();
$('.dataTables_info').hide();
}
else {
$('.dataTables_paginate').show();
$('.dataTables_info').show();
}
},
"columns": [
{ "data": "eventIdUrl", "name": "eventIdUrl", "autoWidth": true },
{ "data": "eventName", "name": "eventName", "autoWidth": true },
{ "data": "eventDateStr", "name": "eventDateStr", "autoWidth": true },
{ "data": "holdingArea", "name": "holdingArea", "autoWidth": true },
{ "data": "applicant", "name": "applicant", "autoWidth": true },
{ "data": "eventAppStatus", "name": "eventAppStatus", "autoWidth": true },
{ "data": "eventRepStatus", "name": "eventRepStatus", "autoWidth": true },
{ "data": "performerName", "name": "performerName", "autoWidth": true },
{ "data": "workfacility", "name": "workfacility", "autoWidth": true },
{
"name": "policy", "autoWidth": true,
"data": function (row, type, val, meta) {
return '<a class="properName" target="_blank" href="/contract/contractdetails?EventExpertId=' + row.expertId + '">' + row.policy + '</a>'
}
},
{
"name": "transportation", "autoWidth": true,
"data": function (row, type, val, meta) {
return '<a class="properName" target="_blank" href="/Travel/ParticipantTravelRequestForm?eventId=' + row.eventId + '&expert_id=' + row.expertId + '">' + row.transportation + '</a>'
}
},
{
"name": "slideStatusBefore", "autoWidth": true,
"data": function (row, type, val, meta) {
return '<a class="properName" target="_blank" href="' + srsSlideUrl + row.eventId + '&expert_id=' + row.slideExpertId + '">' + row.slideStatusBefore + '</a>'
}
},
{
"name": "slideStatusAfter", "autoWidth": true,
"data": function (row, type, val, meta) {
return '<a class="properName" target="_blank" href="' + srsSlideUrl + row.eventId + '&expert_id=' + row.slideExpertId + '">' + row.slideStatusAfter + '</a>'
}
}
]
});`
could you help how to set the data gets align with the header dynamically
I'm getting the following error. I know there are similar answered questions but I have tried to use those answers but I am still unable to see my error.
Error Message:
I have the correct amount of columns in the table and in the request. I have checked for typo's. I am using a video as a guide and I have done everything exactly the same, yet mine doesn't work
code:
<table id="myTable">
<thead>
<tr>
<th>Title</th>
<th>FirstName</th>
<th>Surname</th>
<th>Address1</th>
<th>Address2</th>
<th>Town</th>
<th>Account1</th>
<th>Account2</th>
</tr>
</thead>
</table>
#section mydataTable{
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable(
{
"processing": true,
"filter": false,
"serverSide": true,
"paging": false,
"responsive": true,
"ajax":
{
"url": "#Url.Action("LoadData")",
"datatype": "json",
"type": "POST",
},
"columnDefs": [
{ "defaultContent": "-", "targets": "_all" },
{ "width": "auto", "targets": 0, "orderable": false },
{ "width": "auto", "targets": 1, "orderable": false },
{ "width": "auto", "targets": 2, "orderable": false },
{ "width": "auto", "targets": 3, "orderable": false },
{ "width": "auto", "targets": 4, "orderable": false },
{ "width": "auto", "targets": 5, "orderable": false },
{ "width": "auto", "targets": 6, "orderable": false },
{ "width": "auto", "targets": 7, "orderable": false },
],
"columns": [
{ "data": "Title", "name": "CTitle" },
{ "data": "FirstName", "name": "CFirstName" },
{ "data": "Surname", "name": "CSurname" },
{ "data": "Address1", "name": "CAddress1" },
{ "data": "Address2", "name": "CAddress2" },
{ "data": "Town", "name": "CTown" },
{ "data": "Account1", "name": "CAccount1" },
{ "data": "Account2", "name": "CAccount2" },
],
});
});
</script>
}
C#:
public JsonResult LoadData()
{
IEnumerable<DeathClaims> deathclaims = GetDc();
return Json(new { data = deathclaims, recordsFiltered = deathclaims.Count(), recordsTotal = deathclaims.Count() });
}
private IEnumerable<DeathClaims> GetDc()
{
List<DeathClaims> deathlist = new List<DeathClaims>()
{
new DeathClaims {
Title = "Mr",
FirstName = "Michael",
Surname = "Smith",
Address1 = "132 Spalding Road",
Address2 = "TS252JP",
Town = "Hartlepool",
Account1 = "Current Account 1.0%",
Account2 = "Super Saver 3.0%"},
new DeathClaims {
Title = "Mr",
FirstName = "Steve",
Surname = "Smith",
Address1 = "1 Something Close",
Address2 = "TS273QQ",
Town = "Hartlepool",
Account1 = "Current Account 1.0%",
Account2 = "Super Saver 2.0%"}
};
return deathlist;
}
None of the data is getting through - I'm sure it's a small issue but I just cant see it
Thank you in advance for your help
Thanks
For DataTables plugin to work at server-side. You need to return the JSON in LoadData() method as follow i.e.
...
// Initialization.
string search = Request.Form.GetValues("search[value]")[0];
string draw = Request.Form.GetValues("draw")[0];
string order = Request.Form.GetValues("order[0][column]")[0];
string orderDir = Request.Form.GetValues("order[0][dir]")[0];
int startRec = Convert.ToInt32(Request.Form.GetValues("start")[0]);
int pageSize = Convert.ToInt32(Request.Form.GetValues("length")[0]);
...
// Process your code.
...
JsonResult result = this.Json(new { draw = Convert.ToInt32(draw), recordsTotal = totalRecords, recordsFiltered = recFilter, data = data }, JsonRequestBehavior.AllowGet);
return result;
...
The above properties of DataTables plugin are needed to be captured and maintained in your code by yourself.
I have Programmed in MVC which works fine. but in a few chrome browser the columnd widths are different. This is correct Table
You can see the red underline and this is the wrong one.
as you can see the first three columns are wider than they should be.
this is the code
<div class="col-md-9" style="background-color:gainsboro">
<table cellpadding="0" cellspacing="0" border="0" class=" display stripe row-border order-column" id="example">
<thead>
<tr>
<th style="width:1%">fld_Id</th>
<th style="width:1%">ref_Id</th>
<th style="width:1%">Letter_Id</th>
<th style="width:1%">Flags</th>
<th style="width:1%">Status</th>
<th style="width:1%">كد</th>
<th style="width:1%">نوع</th>
<th style="width:29%">ارجاع دهنده</th>
<th style="width:30%">موضوع ارجاع</th>
<th style="width:30%">موضوع نامه</th>
<th style="width:1%">تاريخ دريافت</th>
<th style="width:1%"></th>
<th style="width:1%"></th>
<th style="width:1%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
I am using MVC , Bootstrap v3.0.0, DataTable jquery. how can I find the problem to make them look the same in different borwsers?
Edit Section:
The Data inside of the Table will be populated by DataTable Jquery server Side. So I made the Client Side DataTable . The result was Ok and no difference in different Browser. when I use the Server Side DataTable the difference will be shown
This is the code that I use to populate the DataTable
<script type="text/javascript">
var BindDataTable = function (clicked_id) {
var table = $("#example").DataTable({
"destroy": true,
"bServerSide": true,
"sAjaxSource": "/Main/GetLetterList",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "fld_id", "value": boldMenu });
$.ajax({
type: "Get",
data: aoData,
url: sSource,
dataType: "json",
success: fnCallback,
error: function (response) {
window.location.href = '/ACCLogin/Login/';
}
})
},
"fnDrawCallback": function () {
var UnBoldMenu = "#" + $("#unBoldMenu").val();
$("#ulTreeview").find(UnBoldMenu).css('font-weight', 'normal');
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData["Flags"] == "4") {
$('td', nRow).css('font-weight', 'bold');
}
if (aData["Status"] == "1") {
$('td', nRow).css('background-color', 'lightgreen');
}
},
"aoColumns": [
{ "mData": "fld_Id" },
{ "mData": "ref_Id" },
{ "mData": "Letter_Id" },
{ "mData": "Flags" },
{ "mData": "Status" },
{ "mData": "ProjectCode" },
{ "mData": "LetterType" },
{ "mData": "Referrer" },
{ "mData": "Ref_subject" },
{ "mData": "Letter_subject" },
{ "mData": "Date_Received" },
{
"mData": "ref_Id",
"render": function (ref_Id, aoData, type, full, meta) {
return '<li class="glyphicon glyphicon-eye-open"></li>'
}
}, {
"mData": "ref_Id",
"render": function (ref_Id, type, full, meta) {
return '<li class="glyphicon glyphicon-edit"></li>'
}
}
, {
"mData": "Letter_Id",
"render": function (Letter_Id, type, full, meta) {
return '<li class="glyphicon glyphicon-retweet"></li>'
}
}
]
})
.columns.adjust();
if (clicked_id!=-16)
table.columns([0, 1, 2, 3, 4]).visible(false);
else
table.columns([0, 1, 2, 3, 4,12]).visible(false);
}
var ViewLetter = function (refId) {
var url = "/Main/ViewLetter?Ref_Id=" + refId;
$('body').css('cursor', 'wait');
$("#myModalBodyDiv").load(url, function () {
$("#myModal").modal("show");
})
}
var ReferenceLetter = function (refId) {
var url = "/Main/ReferenceLetter?Ref_Id=" + refId;
$("#myModalBodyDivRefer").load(url, function () {
$("#myModalRefer").modal("show");
})
}
var ReferenceList = function (letterId) {
var url = "/Main/ReferenceList?Letter_Id=" + letterId;
$("#myModalBodyDivReferList").load(url, function () {
$("#myModalReferList").modal("show");
})
}
</script>
I call BindDataTable on document.ready
I set the width of each column from Jquery and remove it from . so the code is like this:
<div class="col-md-9" style="background-color:gainsboro">
<table cellpadding="0" cellspacing="0" border="0" class=" display stripe row-border order-column" id="example">
<thead>
<tr>
<th>fld_Id</th>
<th>ref_Id</th>
<th>Letter_Id</th>
<th>Flags</th>
<th>Status</th>
<th>كد</th>
<th>نوع</th>
<th>ارجاع دهنده</th>
<th>موضوع ارجاع</th>
<th>موضوع نامه</th>
<th>تاريخ دريافت</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
and set the width in jquery like this:
<script type="text/javascript">
var CategoryClick = function (clicked_id) {
var boldMenu = $("#boldMenu").val();
if (boldMenu != clicked_id)
$("#unBoldMenu").val(boldMenu);
$("#boldMenu").val(clicked_id);
var str = "#" + clicked_id;
$("#ulTreeview").find(str).css('font-weight', 'bold');
BindDataTable(clicked_id);
}
var BindDataTable = function (clicked_id) { //response
var boldMenu = $("#boldMenu").val();
if (#User.Identity.Name=="" || #User.Identity.Name==null)
window.location.href = '/ACCLogin/Login/';
var table = $("#example").DataTable({
"destroy": true,
"bServerSide": true,
"sAjaxSource": "/Main/GetLetterList",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "fld_id", "value": boldMenu });
$.ajax({
type: "Get",
data: aoData,
url: sSource,
dataType: "json",
success: fnCallback,
error: function (response) {
window.location.href = '/ACCLogin/Login/';
}
})
},
"fnDrawCallback": function () {
var UnBoldMenu = "#" + $("#unBoldMenu").val();
$("#ulTreeview").find(UnBoldMenu).css('font-weight', 'normal');
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData["Flags"] == "4") {
$('td', nRow).css('font-weight', 'bold');
}
if (aData["Status"] == "1") {
$('td', nRow).css('background-color', 'lightgreen');
}
},
"aoColumns": [
{
"mData": "fld_Id",
"width": "1%"},
{
"mData": "ref_Id",
"width": "1%" },
{
"mData": "Letter_Id",
"width": "1%" },
{
"mData": "Flags",
"width": "1%" },
{
"mData": "Status",
"width": "1%" },
{
"mData": "ProjectCode",
"width": "1%" },
{
"mData": "LetterType",
"width": "1%" },
{
"mData": "Referrer",
"width": "29%" },
{
"mData": "Ref_subject",
"width": "30%" },
{
"mData": "Letter_subject",
"width": "30%" },
{
"mData": "Date_Received",
"width": "1%" },
{
"mData": "ref_Id",
"width": "1%",
"render": function (ref_Id, aoData, type, full, meta) {
return '<i class="glyphicon glyphicon-eye-open"></li>'
}
}, {
"mData": "ref_Id",
"width": "1%",
"render": function (ref_Id, type, full, meta) {
return '<i class="glyphicon glyphicon-edit"></li>'
}
}
, {
"mData": "Letter_Id",
"width": "1%",
"render": function (Letter_Id, type, full, meta) {
return '<i class="glyphicon glyphicon-retweet"></li>'
}
}
]
})
.columns.adjust();
if (clicked_id!=-16)
table.columns([0, 1, 2, 3, 4]).visible(false);
else
table.columns([0, 1, 2, 3, 4,12]).visible(false);
}
var ViewLetter = function (refId) {
var url = "/Main/ViewLetter?Ref_Id=" + refId;
$('body').css('cursor', 'wait');
$("#myModalBodyDiv").load(url, function () {
$("#myModal").modal("show");
})
}
var ReferenceLetter = function (refId) {
var url = "/Main/ReferenceLetter?Ref_Id=" + refId;
$("#myModalBodyDivRefer").load(url, function () {
$("#myModalRefer").modal("show");
})
}
var ReferenceList = function (letterId) {
var url = "/Main/ReferenceList?Letter_Id=" + letterId;
$("#myModalBodyDivReferList").load(url, function () {
$("#myModalReferList").modal("show");
})
}
and problem solved. all the borwsers shows the same Table columns widths.
Running MVC application in visual studio. this application based on Timesheet management. i have different project drop down list . i have attached screen shot for your reference
Before Submit :
after if user enter wrong if trying change time looks
Concrete Class :
public void UpdateEmployee(TimeSheetDetails timesheetupdate)
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["TimesheetDBEntities"].ToString()))
{
SqlCommand cmd = new SqlCommand("Usp_UpdateTimesheet", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#TimeSheetID ",timesheetupdate.TimeSheetID);
cmd.Parameters.AddWithValue("#DaysofWeek", timesheetupdate.DaysofWeek);
cmd.Parameters.AddWithValue("#Hours", timesheetupdate.Hours);
cmd.Parameters.AddWithValue("#Period", timesheetupdate.Period);
cmd.Parameters.AddWithValue("#ProjectID", timesheetupdate.ProjectID);
cmd.Parameters.AddWithValue("#UserID", timesheetupdate.UserID);
cmd.Parameters.AddWithValue("#CreatedOn", timesheetupdate.CreatedOn);
cmd.Parameters.AddWithValue("#TimeSheetMasterID", timesheetupdate.TimeSheetMasterID);
cmd.Parameters.AddWithValue("#TotalHours",timesheetupdate.Hours);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
Edit Controller Action :
// GET: Employee/EditEmpDetails/5
public ActionResult EditTimesheet(int id)
{
TimeSheetConcrete EmpRepo = new TimeSheetConcrete();
return View(EmpRepo.TimesheetDetailsbyTimeSheetMasterID().Find(Emp => Emp.TimeSheetID == id));
}
// POST: Employee/EditEmpDetails/5
[HttpPost]
public ActionResult EditTimesheet(int id, EmpModel obj)
{
try
{
TimeSheetConcrete EmpRepo = new TimeSheetConcrete();
EmpRepo.UpdateEmployee(obj);
return RedirectToAction("GetAllEmpDetails");
}
catch
{
return View();
}
}
My View :
#{
ViewBag.Title = "TimeSheet";
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
<link href="~/Scripts/dataTablesScripts/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/dataTablesScripts/responsive.bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/dataTablesScripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTablesScripts/dataTables.bootstrap4.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">All TimeSheet</div>
<div class="panel-body">
<table id="myTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>TimeSheetMasterID</th>
<th>FromDate</th>
<th>ToDate</th>
<th>TotalHours</th>
<th>CreatedOn</th>
<th>TimeSheetStatus</th>
<th>Comment</th>
<th>Details</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myTable").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/AllTimeSheet/LoadTimeSheetData",
"type": "POST",
"datatype": "json"
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
},
{
"targets": [6],
"searchable": false,
"orderable": false
},
{
"targets": [7],
"searchable": false,
"orderable": false
},
{
"targets": [8],
"searchable": false,
"orderable": false
}
],
"columns": [
{ "data": "TimeSheetMasterID", "name": "TimeSheetMasterID", "autoWidth": true },
{ "data": "FromDate", "name": "FromDate", "autoWidth": true },
{ "data": "ToDate", "name": "ToDate", "autoWidth": true },
{ "data": "TotalHours", "name": "TotalHours", "autoWidth": true },
{ "data": "CreatedOn", "name": "CreatedOn", "autoWidth": true },
{ "data": "TimeSheetStatus", "name": "TimeSheetStatus", "title": "Status", "autoWidth": true },
{ "data": "Comment", "name": "Comment", "title": "Comment", "autoWidth": true },
{
"render": function (data, type, full, meta)
{ return '<a class="btn btn-info" href="/AllTimeSheet/Details/' + full.TimeSheetMasterID + '">View</a>'; }
},
{
data: null, render: function (data, type, row) {
if (row.TimeSheetStatus == "Submitted" || row.TimeSheetStatus == "Rejected") {
return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.TimeSheetMasterID + "'); >Delete</a>";
}
else {
return row.TimeSheetStatus;
}
}
},
{
"render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/TimeSheet/Edit/' + full.TimeSheetMasterID + '">View</a>'; }
},
]
});
});
</script>
<script type="text/javascript">
function DeleteData(ID) {
if (confirm("Are you sure you want to delete ...?")) {
DeleteSheet(ID);
}
else {
return false;
}
}
function DeleteSheet(ID) {
// var url = '#Url.Content("~/TimeSheetID")' + "TimeSheet/Delete";
$.post(url, { TimeSheetMasterID: ID }, function (data) {
if (data) {
oTable = $('#myTable').DataTable();
oTable.draw();
}
else {
alert("Something Went Wrong!");
}
});
}
</script>
if user want selected edit mode dropdown selected value ? i am trying many ways i am getting error . please any one give idea to solve this issues
I have a datatable that is being populated via serverside ajax. I need to pass variables to the serverside C# method. The variables are not getting to the serverside.
I've tried a few different approaches. It should be pretty easy.
var tblApplication = $('#tblApplication').DataTable({
"ajax": {
"url": '../../Search/ApplicationList',
"type": 'POST',
"data":{
yearh: 2014,
make: ''
}
},
"autoWidth": false,
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).addClass("parent");
return nRow;
},
"order": [[1, "desc"]],
"deferRender": true,
"columns": [
{
"title": '',
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '<img src="../../assets/images/details_open.png" />'
},
{ "title": 'ApplicationId', "data": 'ApplicationId', "visible": false },
{ "title": 'Year', "data": 'Year' },
{ "title": 'Make', "data": 'Make' },
{ "title": 'Model', "data": 'Model' },
{ "title": 'Qualifier', "data": 'Qualifier' },
{ "title": 'Axle', "data": 'Axle' },
{ "title": 'Pad Set', "data": 'PadSet' },
{ "title": 'Side', "data": 'Side' },
{ "title": 'Part List', "data": 'PartListId' }
]
});
[HttpPost]
public JsonResult ApplicationList(int year = 0, string make = null )
{
}
According to datatables.js reference you need to extend "data" something like following to make it work;
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
return $.extend( {}, d, {
"extra_search": $('#extra').val(),
"year": 2014,
"make": 'Nissan'
} );
}
}
} );
For further documentation please see the this. Hope this helps.