根据年份和月份过滤Jquery DataTable

时间:2019-03-08 06:57:47

标签: asp.net-mvc entity-framework datatables

我有一个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);
        }
    }

1 个答案:

答案 0 :(得分:0)

您可以使用DataTables搜索插件,您可以在此处阅读有关内容

Search/Range Filtering