Individual Column Searching Not Working Properly(Server-Side)

Individual Column Searching Not Working Properly(Server-Side)

mvcusermvcuser Posts: 6Questions: 0Answers: 0

Hello everyone,

I want to use search by text inputs. When I write something to inputs, always my JqDataTable sSearch_0 data is filling, others are blank. Where is my wrong ?

Link is here ;
https://datatables.net/examples/api/multi_filter.html

My DataTable class ;

    public class JqDataTable
        {
            public string sEcho { get; set; }

            public string sSearch { get; set; }
            public int iDisplayLength { get; set; }
            public int iDisplayStart { get; set; }

            public int? iColumns { get; set; }

            public int? iSortingCols { get; set; }
            public string sColumns { get; set; }

            public int iSortCol_0 { get; set; }
            public string sSortDir_0 { get; set; }

            public string sSearch_0 { get; set; }
            public string sSearch_1 { get; set; }
            public string sSearch_2 { get; set; }
            public string sSearch_3 { get; set; }

        }

Table and javascripts ;

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {

            var table = $('#dtbl').DataTable({
                scrollY: 300,
                scroolX: 100,
                aoColumns: [
                    { 'data': 'Name' },
                    { 'data': 'City' },
                    { 'data': 'State' },
                    { 'data': 'Country' },
                ],
                bFilter: true,//Enables Filtering
                bServerSide: true,
                sAjaxSource: "/Home/EmployeeList" 

            });

            table.columns().eq(0).each(function (colIdx) {
                $('input', table.column(colIdx).footer()).on('keyup change', function () {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });
            });
        });
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">

            <div class="col-md-12">
                <table id="dtbl" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Country</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th><input type="search" placeholder="Search Name"></th>
                            <th><input type="search" placeholder="Search city"> </th>
                            <th><input type="search" placeholder="Search state"></th>
                            <th><input type="search" placeholder="Search country"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</body>

Controller ;

public ActionResult EmployeeList(JqDataTable model)
        {
            using (var context = new MyDbDataContext())
            {
                var employees = (from n in context.Employees select n);

                var count = employees.Count();



                if (!(string.IsNullOrEmpty(model.sSearch)) && !(string.IsNullOrWhiteSpace(model.sSearch)))
                {
                    employees = employees.Where(x => x.Name.Contains(model.sSearch) || x.City.Contains(model.sSearch) || x.State.Contains(model.sSearch));
                }



                //Name Column Filtering
                if (!(string.IsNullOrEmpty(model.sSearch_0)) && !(string.IsNullOrWhiteSpace(model.sSearch_0)))
                {
                    employees = employees.Where(x => x.Name.Contains(model.sSearch_0));
                }
                //City Column Filtering
                if (!(string.IsNullOrEmpty(model.sSearch_1)) && !(string.IsNullOrWhiteSpace(model.sSearch_1)))
                {
                    employees = employees.Where(x => x.City.Contains(model.sSearch_1));
                }
                //State Column Filtering
                if (!(string.IsNullOrEmpty(model.sSearch_2)) && !(string.IsNullOrWhiteSpace(model.sSearch_2)))
                {
                    employees = employees.Where(x => x.State.Contains(model.sSearch_2));
                }


                var emplist = employees.Skip(model.iDisplayStart).Take(model.iDisplayLength).ToList();
                var result = new 
                {
                    iTotalRecords = emplist.Count(),//records per page 
                    iTotalDisplayRecords = count, //total table count
                    aaData = emplist //employee list

                };

                return Json(result,JsonRequestBehavior.AllowGet);
            }

        }

Replies

  • mvcusermvcuser Posts: 6Questions: 0Answers: 0

    @colin Can you look my codes again ?

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    You seem to have ignored Colin's reply to your other post:

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  • mvcusermvcuser Posts: 6Questions: 0Answers: 0

    @tangerine I found the solution.
    I added initComplete after sAjaxSource. Thanks for helping guys.

      initComplete: function() {
                        var api = this.api();
                        api.columns([0, 1, 2, 3]).every(function() {
                            var that = this;
                            $('input', this.footer()).on('keyup change', function() {
                                if (that.search() !== this.value) {
                                    that
                                        .search(this.value)
                                        .draw();
                                }
                            });
                        });
                    }
    
This discussion has been closed.