Search not working

Search not working

MotiMoti Posts: 3Questions: 2Answers: 0

Hi Guys,
I'm using this API https://datatables.net/examples/api/row_details.html, and after I implemented this table to my asp.net mvc application I'm getting the data through json and all looks fine.

The issue I have is the search textbox is not functioning also sorting pages...actually nothing works just the data show and the collaps button.

here is my code example for your review:

@{
ViewBag.Title = "Datatable";
}

<style>
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
<br />
<br />
<br />
<br />
<br />
<br />

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

Itemlookup Description
Itemlookup Description

@section scripts{

<script type="text/javascript">
function format(d) {
return 'Cost: ' + d.Cost
+ '<br>' +
'Price: ' + d.Price + '<br>' + '';
}

    $(document).ready(function () {
        var dt = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/Home/Returnjson",
            "columns": [
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                { "data": "Itemlookupcod" },
                { "data": "Description" }
            ],
            "order": [[1, 'asc']]
        });

        // Array to track the ids of the details displayed rows
        var detailRows = [];

        $('#example tbody').on('click', 'tr td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = dt.row(tr);
            var idx = $.inArray(tr.attr('id'), detailRows);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                detailRows.splice(idx, 1);
            }
            else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    detailRows.push(tr.attr('id'));
                }
            }
        });

        // On each draw, loop over the `detailRows` array and show any child rows
        dt.on('draw', function () {
            $.each(detailRows, function (i, id) {
                $('#' + id + ' td.details-control').trigger('click');
            });
        });
    });
</script>

}

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    From the server-side processing docs:

    With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server.....

    In other words, with your "serverSide: true" initialisation, DataTables expects your own server-side script to handle sorting, searching, etc.

This discussion has been closed.