javascript – 列表排序不能使用jQuery中使用datatable的ajax

我在laravel中使用jQuery的Datatable来查看带有ajax的列表,但是当我点击排序按钮时,绘制参数会增加其值并根据页面对数据进行排序.

我的控制器：

/**
 * listings of organizations table
 * 
 * @param  $request object of Request class
 * @return response json
 */
public function apiListing(Request $request)
{
    $request['page'] = $request['draw'];
    $columns = $request->input('columns');
    $order = $request->input('order');
    $orderField = $columns[$order[0]['column']]['data'];
    $orderDir = $order[0]['dir'];
    $request['s'] = $orderField;
    $request['o'] = $orderDir;
    $request['limit'] = $request->input('length');
    $offset = $request->input('start');
    $request['page'] = $offset < $request['limit'] ? 1 : intval($offset/$request['limit'])+1;
    $utilities = $this->service->paginate($request);
    $totalFiltered = $utilities->total();
    $data = [];

    foreach ($utilities as $key => $utility) {
        $data[] = [
            'utility_id'        => $utility->utility_id,'name'              => $utility->name,'street_address'    => $utility->street_address,'city'              => $utility->city,'state_code'        => $utility->state_code,'zip'               => $utility->zip,];
    }

    $json_data = array(
                "draw"            => intval($request->input('draw')),"recordsTotal"    => intval($totalFiltered),"recordsFiltered" => intval($totalFiltered),"data"            => $data   
                );

    return response()->json($json_data);
}

我的javascript：

function getUtilitiesListingObj()
{
    return new function() {
        this.$tableObj = $('.utilities-listing-table'),this.$searchForm = $('#utilitiesSearch'),this.$datatableObj = '',this.bind = function() {
            var $obj = this;
            $obj.filtering();
            $obj.initiallizeDataTable();
        },this.initiallizeDataTable = function() {
            var $obj = this;
            $.extend( $.fn.dataTableExt.oStdClasses,{
                "sFilterInput": "form-control","sLengthSelect": "form-control"
            });

            $obj.$dataTableObj = $obj.$tableObj.DataTable( {
                "pageLength": 100,"lengthMenu": [[10,25,50,100,500],[10,500]],"order": [[ 1,"asc" ]],"stateSave": true,"scrollY": "500px","serverSide": true,"processing": true,"oLanguage": {
                   "sProcessing": "Box-body').on('submit','form#utilitiesSearch',function() {
                var $form =$(this);
                var $nameObj = $('.name-filter');
                var $addressObj = $('.address-filter');
                var $cityObj = $('.city-filter');
                var $stateObj = $('.state-filter');
                var $zipObj = $('.zip-filter');

                $nameObj.attr('value',$nameObj.val());
                $addressObj.attr('value',$addressObj.val());
                $cityObj.attr('value',$cityObj.val());
                $stateObj.attr('value',$stateObj.val());
                $zipObj.attr('value',$zipObj.val());

                $obj.$dataTableObj.rows().invalidate().draw();
                // $("input[id=hidden_field_name]").val($nameObj.val());
             //    $("input[id=hidden_field_cid]").val($cidobj.val());
                // $("input[id=hidden_field_only_seller_buyer]").val($onlySellerFilerFilter.val());
                return false;
            });
        }
    }
}

当我点击排序按钮然后它不排序数据和绘制参数增加其值如下：

最佳答案

DataTables 1.10.x的预期行为是随每个请求绘制值增量.

你也可以设置页面号d.page_no = d.start / d.length 1;在这样的请求中：

....
"ajax":{
        "url": GLOBAL_SETTINGS.UTILITIES_LISTING_URL,"data": function(d) {
            d.name = $('.name-filter').attr('value');
                d.street_address = $('.address-filter').attr('value');
                d.city = $('.city-filter').attr('value');
                d.state_code = $('.state-filter').attr('value');
                d.zip = $('.zip-filter').attr('value');          
                d.page_no = d.start / d.length + 1;
        }
}
...

并且还可以在控制器中设置页面no,如下所示：

/**
 * listings of organizations table
 * 
 * @param  $request object of Request class
 * @return response json
 */
public function apiListing(Request $request)
{
    $request['page'] = $request['page_no'];
    $columns = $request->input('columns');
    $order = $request->input('order');
    $orderField = $columns[$order[0]['column']]['data'];
    $orderDir = $order[0]['dir'];
    $request['s'] = $orderField;
    $request['o'] = $orderDir;
    $request['limit'] = $request->input('length');
    $offset = $request->input('start');
    $request['page'] = $offset < $request['limit'] ? 1 : intval($offset/$request['limit'])+1;
    $utilities = $this->service->paginate($request);
    $totalFiltered = $utilities->total();
    $data = [];

    foreach ($utilities as $key => $utility) {
        $data[] = [
            'utility_id'        => $utility->utility_id,];
    }

    $json_data = array(
                "Page"            => intval($request->input('page_no')),"data"            => $data   
                );

    return response()->json($json_data);
}

希望这可能对你有帮助.

ajax

上一篇：JQuery可调整大小对齐其他可调整大下一篇：Jquery datepicker和php datetime不

javascript – 列表排序不能使用jQuery中使用datatable的ajax

相关推荐