基于自定义降序或升序对数据表进行排序

Question

我有一个降序和升序的下拉列表供用户选择。我必须根据用户选择的下拉列表对我的数据表进行排序。例如，如果用户选择升序，我将按升序对数据表进行排序。有没有办法在我的代码中实现它？谢谢。

<script>
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var select_value = $('#select_value').val();
            var select_column = $('#select_column').val();
            var column_index = '';
            //var column = data[1] || 0; // use data for the age column
            if ( select_value == '' || select_column == '' )
            {
                return true;
            }
            else {
                //get the column name of data table
                var column = 0;
                $('#dataTable_table thead tr th').each(function(){
                    if( $(this).text() == select_column.toString())
                    {
                        return false;
                    }
                    column = column + 1;
                });
                column = data[column] || 0;
                if(column!==0 && column.indexOf(select_value.toString()) >= 0)
                {
                    return true;
                }
            }
            return false;
        }
    );
    $.fn.dataTableExt.sErrMode = 'throw';
    $(document).ready(function () {
        var  table = $('#dataTable_table').DataTable();
        $('#select_value').keyup( function() {
            table.draw();
        });
    });

$(document).ready(function() {
$('#example').DataTable();
// this is for select dropdown when change
$('.toSort').on('change',function(){
    var thisValue = $(this).val();
    var ThisSort = $(this).attr('data-sort');
    // trigger click on (1) mean first column .. you can change (1) to (2) and see the result
    var column = $('#example  thead  tr  th:nth-child(1)');
    // make if statement to check which option user choose
    if(thisValue == 'asc' && ThisSort !== 'asc'){
        // trigger click
        column.trigger('click');
        $(this).attr('data-sort', 'asc');
    }else if(thisValue == 'des' && ThisSort !== 'des'){
        column.trigger('click');
        $(this).attr('data-sort', 'des');
    }
});

});

Answer 1

您可以很好地使用 ajax。

给定一个下拉选择框供您输入，确保在每个选择选项中都有name="someAttribute" in yoru，然后您将使用此名称访问他们选择的值。 jQuery get html id from selected dropdown

所以尝试这样的事情，使用 jquery 点击事件，将其添加到您现有的 keyup 事件下方的就绪函数中；

//in your ready funtion
$(document).ready(function () {
   var table = $('#dataTable_table').DataTable();
    $('#select_value').keyup( function() {
       table.draw();
     });

     // click event
    $("select[name$='someAttribute']").on.('click', function(){

        var selectedSort = $(this);

        //call database again, applying it to a variable
        $.ajax({
            type: 'POST',
            url: 'yourDbClass.php',
            data: 'sort=' + selectedSort ,
            dataType: 'json',
            cache: false,
            success: function(result) {
              $("select[name$='someAttribute']").html(data[0]);
            },
        });
     })
  });

现在在调用 db 表的 php 方法上，有一个参数 $sort，这就是你发布到该方法的内容。然后返回结果，结果会回到ajax。

这里有一个很好的关于 ajax 调用的教程，你将把它放在那里 using jquery $.ajax to call a PHP function

编辑的代码示例。

所以，ajax.php 是你的 php 数据库代码，它返回一个 json 编码的数组

return json_encode($yourMySqlresults);