我有一个jQuery DataTable,其中有两个具有年份和月份的下拉菜单。我想根据来自jQuery DataTable的这两个外部参数对jQuery DataTable进行排序。一个下拉列表具有年份,而其他下拉列表具有月份。我不知道用于自定义过滤jquery数据表的正确代码
<div class="container" style="margin-top:10px">
<label>
List of Feedback receiverd through website int the month
@Html.DropDownListFor(model=>model.SelectedMonth,(IEnumerable<SelectListItem>)ViewBag.years,"--Select Month--",new { @class = "form-control" , onchange = "UserChanged()" })
</label>
<table id="FeedbackDetails" class="ui celled table">
<thead>
<tr>
<th>S.No</th>
<th>User Name</th>
<th>Email ID</th>
<th>Comment</th>
<th>Designation</th>
<th>Organization</th>
<th>Contact No</th>
<th>City</th>
<th>Feedback Date</th>
</tr>
</thead>
</table>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Feedback Comment</h4>
</div>
<div class="modal-body">
<p id="commentdesc"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section脚本{
$(document).ready(function () {
$(document).on("click", ".opencomment", function () {
var mycomment = $(this).data('id');
$('.modal-body #commentdesc').html(mycomment);
// $('#myModal').modal('show');
});
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function (a) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
$('#FeedbackDetails').DataTable({
"processing": true,
"ajax": {
"url": "/ViewFeedback/LoadData",
"type": "GET",
"datatype": "json"
},
"lengthMenu": [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "All"]
],
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true,
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
var oSettings = this.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
return nRow;
},
"columns": [
{ "data": null, "autoWidth": true },
{ "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },
{ "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },
{ "data": "FeedBackComment", "name": "Comment", "autoWidth": true },
{ "data": "Designation", "name": "Designation", "autoWidth": true },
{ "data": "Organization", "name": "Organization", "autoWidth": true },
{ "data": "ContactNo", "name": "Contact No", "autoWidth": true },
{ "data": "City", "name": "City", "autoWidth": true },
{
"data": "Feedback_Date", "sType": "date-uk", "autoWidth": true
},
],
columnDefs: [{
targets: 3,
//data:"FeedbackID",
render: function (data, type, row, meta) {
if (type === 'display' && data.length > 40) {
return '<span title="' + data + '">' + data.substr(0, 38) + '...<a href="" data-id="' + data + '" data-toggle="modal" class="opencomment" data-target="#myModal">Show More</a>';
}
else {
return data;
}
}
}],
"language": {
"emptyTable": "No Events Found Related To This User"
},
});
});
public ActionResult Index()
{
ViewBag.years = new SelectList(Enumerable.Range(DateTime.Today.Year, 20).Select(x => new SelectListItem()
{
Text = x.ToString(),
Value = x.ToString()
}), "Value", "Text");
return View();
}
public ActionResult LoadData()
{
using (var Ms = new DHIFeedbackEntities5())
{
var feedbacklist = Ms.fetchrecord().ToList();
return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);
}
}