asked on

JQuery Datatable - column sorted when dropdown item is selected

Hi,
I am new to this forum. I have a datatable with a dropdown in six of the columns. My problem is that when I click on each dropdown that column sorts and I do not want that. I would like that column to sort only when I click on the header and not the dropdown.
The functionality of the dropdown works as it should(meaning it only shows records for the item selected in the dropdown), but again I do not want sorting fired when just clicking on an item in the dropdown.

Here is the code. Since I am not sure how to post the html code to make it formatted properly, I also attached it. Thank you very much.

var table = $('#ticketTable').DataTable({
"stateSave": true,
"stateDuration": 0,
"autoWidth": false,
"columnDefs": [
{ "width": "40px", "targets": 0, "visible": true },
{ "width": "150px", "targets": 1, "visible": true },
{ "width": "250px", "targets": 2, "visible": true },
{ "width": "150px", "targets": 3, "visible": true },
{ "width": "53px", "targets": 4, "visible": true },
{ "width": "90px", "targets": 5, "visible": true },
{ "width": "53px", "targets": 6, "visible": true },
{ "width": "90px", "targets": 7, "visible": true },
{ "width": "90px", "targets": 8, "visible": true },
{ "width": "90px", "targets": 9, "visible": true },
{ "width": "90px", "targets": 10, "visible": true },
{ "width": "50px", "targets": 11, "visible": true }
],

//Create the dropdowns
    responsive: true,
    "bAutoWidth": false,
    initComplete: function () {
        this.api().columns([4, 5, 6, 7, 8, 9]).every(function () {     
            var column = this;
 
            var select = $('<select><option value=""></option></select>')
                .appendTo($("#filters").find("th").eq(column.index()))
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val());
 
                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
 
            column.data().unique().sort().each(function (d, j) {
                $(select).append('<option value="' + d + '">' + d + '</option>')
            });
        });
    }
    //End of create dropdowns
});

Open in new window

<table class="display table table-striped table-bordered" id="ticketTable" style="width:100%">
        <thead>
            <tr id="filters">
                <th>
                    @Html.DisplayNameFor(model => model.iNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.dtLastUpdated)
                    <input type="text" id="datepicker" class="datepicker">    @*readonly="readonly"*@
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.vcSubject)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.vcFrom)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.vcPriority)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.vcAssignedTo)
                </th>
                @*<th>
                    @Html.DisplayNameFor(model => model.dtAssignedDate)
                </th>*@
                <th>
                    @Html.DisplayNameFor(model => model.vcStatus)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.vcRequestType)
                </th>
                @*<th>
                    @Html.DisplayNameFor(model => model.vcBody)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.dtDateSubmitted)
                </th>*@
                <th>
                    @Html.DisplayNameFor(model => model.vcLocation)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.vcCategory)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.dtAnticipatedCompletion)
                </th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.iNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.dtLastUpdated)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcSubject)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcFrom)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcPriority)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcAssignedTo)
                </td>
                @*<td>
                    @Html.DisplayFor(modelItem => item.dtAssignedDate)
                </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.vcStatus)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcRequestType)
                </td>
                @*<td>
                    @Html.DisplayFor(modelItem => item.vcBody)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.dtDateSubmitted)
                </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.vcLocation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcCategory)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.dtAnticipatedCompletion)
                </td>
                <td>
                    
                    <a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("EditOneRecord", "Tickets", 
                                            new { id = item.iNumber })')"><i class="fa fa-pencil fa-lg"></i></a>
                    <a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete", "Tickets", new { 
                                            id = item.iNumber })')"><i class="fa fa-trash fa-lg"></i></a>
                </td>
            </tr>
            }
        </tbody>
    </table>

Open in new window

lenamtl

Hi,

This is easy just use rowReorder
To see a working example
https://datatables.net/extensions/rowreorder/examples/initialisation/selector.html

$(document).ready(function() {
    var table = $('#example').DataTable( {
        rowReorder: {
            selector: 'tr'
        },
        columnDefs: [
            { targets: 0, visible: false }
        ]
    } );
} );

Open in new window

I do recommend to use autowidth with responsive to prevent issues as it may occured in some case per experience

jwebster77

ASKER

Hi, that is not the answer I was looking for. Let me try again.
In the column header I also have a dropdown(see attached image). When I click on the dropdown to select a value, sorting also happens and I do not want that. Basically when I click the dropdown sorting fires too.
When I click on the dropdown I just want to filter by the value that I will choose, and not sort. Thank you

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jwebster77

ASKER

Yes! This is the solution! Thank you very much

Chris Stanyon

No worries :)