Column auto-sorting on focus/click - please help

jason@supportvisions.com

Trying to stop autosorting when a user clicks in my form.

I looked at different solutions but they don't seem to work. No matter what I do the columns sort on their own when a user clicks to search. How do I stop this? This is not my original code but something I just need to get in and change and get out. Any ideas?

$('#addprodbutton').one("click", function () {
    $('#product_std').DataTable({
        "ordering": true, // Disables control ordering (sorting) abilities
        "processing": true, // Enables control processing indicator.
        "serverSide": true, // Enables control server-side processing mode.
        "pagingType": "simple_numbers", // Pagination button display options
        "autoWidth": false, // Disables automatic column width calculation.
        "responsive": true, // Enables and configure the Responsive extension for table's layout for different screen sizes
        "searching": true, // Enables control search (filtering) abilities
        "searchHighlight": true,
        "lengthChange": true, // Disables control the end user's ability to change the paging display length of the table.
        "Info": true, // Enables control table information display field
        "columnDefs": [ // Column definitions configuration array.
            { "targets": 0, "width": "50px" },
            { "targets": 1, "width": "225px" },
            { "targets": 2, "width": "150px" }
        ],
        "order": [[3, "asc"]],
        "ajax": { // Load data for the table's content from an Ajax source
            url: "/quotes_orders/get_product_std.php", // json datasource
            type: "post",  // type of method  ,GET/POST/DELETE
            error: function () { $("#product_grid_processing").css("display", "none"); }
        },
        "sDom": '<"top pull-right"l><"top"rt><"bottom col-sm-3"i><"bottom"p><"clear">', // Define the table control elements to appear on the page and in what order
        "_createdRow": function (nRow, aData, iDataIndex) {
            $('td:eq(0)', nRow).append("<a href='/quotes_orders/" + jsJobID + "/products/create?product_item_id=" + aData[12] + "'><button type='button' class='btn btn-sm btn-warning' data-toggle='tooltip' title='Add and Edit'><i class='glyphicon glyphicon-pencil'></i></button></a>");
        },
        get "createdRow"() {
            return this["_createdRow"];
        },
        set "createdRow"(value) {
            this["_createdRow"] = value;
        },
    });

    var Table = $('#product_std').dataTable();

**My search is here it seems: **

 var Table = $('#product_std').dataTable();

        //Category
            $('#stdcabcat').on('change', function () {
                var Value = $(this).val();
                Table.fnFilter("" + Value + "", 1); //Exact value, column, r
            });

        //Code
            $('#stdcabcode').on('keyup', function () {
                var Value = $(this).val();
                Table.fnFilter("" + Value + "", 2); //Exact value, column, r
            });

        //Description
            $('#stdcabdesc').on('keyup', function () {
                     var Value = $(this).val();
                Table.fnFilter("" + Value + "", 3); //Exact value, column, r
            });

These do not match exactly AND they sort the columns when given focus. How do I get that auto-sorting to stop?

kthorngren

A couple options come to mind....

You can disable sorting with the ordering option. Or you can create two header rows; one that allows ordering and the other that allows searching. Something like this example:
http://live.datatables.net/saqozowe/70/edit

Note the use of orderCellsTop to tell Datatables which row to use for sorting.

Kevin

jason@supportvisions.com

Great, I'll give it a shot. Thank you so much for the response.