Question

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

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

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

所以尝试这样的事情，使用jquery点击事件，将它添加到你现有的keyup事件下面的ready函数中;

//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]);
            },
        });
     })
  });

现在你的php方法调用你的db表，有一个param $ sort，这就是你发布到那个方法的东西。然后返回结果，这将返回到ajax。

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

已编辑的代码示例。

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

return json_encode($yourMySqlresults);

基于自定义降序或升序对DataTable进行排序

1 个答案: