Btukfyl

I got this from the internet somewhere but i don't know how to connect it with datatables server side also I would appreciate who could help me with length menu functions of dataTable.By the way im using Asp.net Mvc

This is my Html Table

<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">

    <i class="fa fa-calendar"></i>&nbsp;

       <span></span> <i class="fa fa-caret-down"></i>

</div>

<br />

<table id="myTable1" class="display ui-datepicker-row-break" style="width:100%">

 <thead>

     <tr>

       <th>Status</th>

       <th>Data and Time</th>

     </tr>

 </thead>

 <tfoot>

      <tr>

         <th>Status</th>

         <th>Data and Time</th>

      </tr>

 </tfoot>

</table>

This is my script for both DataTables and the Data Picker

<!--Import jQuery before export.js-->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>





<!--Data Table-->

<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>



<!--Export table buttons-->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>



<!--Export table button CSS-->



<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">



<script type="text/javascript">

    $(document).ready(function () {

        $.noConflict();

        $('#myTable1').DataTable({

            "ajax": {

                "url": "/Profile/GetData",

                "type": "POST",

                "datatype": "application/json"

            },



            "serverSide": "true",

            "order": [0, "asc"],

            "processing": "true",





            dom: 'Bfrtip',

            buttons: [

                'copy', 'pdf', 'csv', 'print', 'excel'

            ]

        });

    });

</script>



@*<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>*@

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />



<script type="text/javascript">

    $(function () {



        var start = moment().subtract(29, 'days');

        var end = moment();



        function cb(start, end) {

            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

        }



        $('#reportrange').daterangepicker({

            startDate: start,

            endDate: end,

            ranges: {

                'Today': [moment(), moment()],

                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],

                'Last 7 Days': [moment().subtract(6, 'days'), moment()],

                'Last 30 Days': [moment().subtract(29, 'days'), moment()],

                'This Month': [moment().startOf('month'), moment().endOf('month')],

                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]

            }

        }, cb);



        cb(start, end);



    });

</script>

And my Controller looks like this

[HttpPost]

    public string GetData()

    {

        string sJSONResponse = "";

        List<string> data = new List<string>();

        using (var context = new RSAT.Api.Data.Proxy.ATT2018NOVUSContext())

        {

            var baseViewModel = (from userinfo in context.Userinfo

                                 join department in context.Dept on userinfo.Deptid equals department.Deptid

                                 select new

                                 {

                                     Id = userinfo.Userid,

                                     Name = userinfo.Name,

                                     Department = department.DeptName,

                                     CardNumber = userinfo.CardNum,

                                     Status = userinfo.UserFlag.ToString(),

                                     HistoryOfStatuses = (from checkinout in context.Checkinout

                                                          join status in context.Status on checkinout.CheckType equals status.Statusid

                                                          where checkinout.Userid == userinfo.Userid

                                                          orderby checkinout.CheckTime descending

                                                          select new Checkinout

                                                          {

                                                              CheckStatus = status.StatusText,

                                                              CheckTime = checkinout.CheckTime

                                                          }).ToList(),

                                 }).ToList();



            foreach (var i in baseViewModel)

            {

                foreach (var h in i.HistoryOfStatuses)

                {

                    var s = "["" + h.CheckStatus + ""," + """ + h.CheckTime + ""]";

                    data.Add(s);

                }

            }



            string dataRez = "[";

            foreach (var i in data)

            {

                dataRez += i + ",";

            }

            dataRez = dataRez.Remove(dataRez.Length - 1);

            dataRez = dataRez + "]";

            sJSONResponse = "{"draw": 1,"recordsTotal": 57,"recordsFiltered": 57,"data":" + dataRez + "}";

        }

        return sJSONResponse;

    }

All i want to do is to add the length menu to the datatable server side and i need that date picker to work but i don't know how to connect it to the table or datatable