Dropdown sorts column when clicking on it

nsanta

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
        });

****HTML:****
`<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>
                    @*@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })*@

                    <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>`

Again, thank you very much.

colin

Hi @nsanta ,

This thread should help, it's asking the same thing.

Cheers,

Colin