Question

问题

我正在使用服务器端分页和搜索，分页工作正常但是当我在搜索框中输入一些自动向服务器发送请求的文本时，它会立即返回空对象，但它也会将“recordsTotal”分页带到工作。这意味着一个查询正在执行，但第二个查询不是。

使用邮递员的API测试

我已经测试了API使用POSTMAN以及我发送的搜索字符串，它给我带来了相应的结果，但是当我通过搜索框发送它（从前端）它只是根本无法工作

这是我的控制器代码：

我有意评论过“fnCallback（records）”，但我正在安慰“console.log（result）”从后端API返回的结果数组

angular.module('withServerSide', ['datatables'])
.controller('withServerSideController', function WithPromiseController($scope, DTOptionsBuilder, DTColumnBuilder, filterService)
{
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('es_officer_id', 'Id').withOption('searchable', true),
        DTColumnBuilder.newColumn('es_officer_name', 'Name').withOption('searchable', true)
    ];

    $scope.dtOptions = DTOptionsBuilder
        .newOptions()
        .withFnServerData(serverData)
        .withDataProp('data') // tried data aswell
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('paging', true)
        .withOption('stateSave', true)
        .withOption('lengthMenu', [5, 10, 20, 30, 50, 100 ])
        .withDisplayLength(5)
        .withPaginationType('full_numbers')
        .withButtons([
            'colvis',
            'print',
            'excel'
        ])

    function serverData(sSource, aoData, fnCallback, oSettings) 
    {
        //All the parameters you need is in the aoData variable

        var draw   = aoData[0].value;             
        var limit  = aoData[4].value;               // item per page
        var order  = aoData[2].value[0].dir;    // order by asc or desc
        var start  = aoData[3].value;              // start from
        var search = aoData[5].value;           // search string

        //Then just call your service to get the records from server side
        filterService.execute(start, limit, order, search).then(function(result)
        {    
            console.log(result);

            // var records = {
            //         'draw': draw,
            //         'recordsTotal': result.data.recordsTotal,
            //         'recordsFiltered': result.data.recordsFiltered,
            //         'data': result.data.es_officers  
            //     };

            // // console.log(records);

            // fnCallback(records);
        });
    }
});

以下是filterService工厂的代码：

angular.module('Main_Module').factory('filterService', filterService);
filterService.$inject = ['$q', '$http']
function filterService($q, $http)
{
    var service = {
    execute: execute
    };

    return service;

        //               Start-From  LIMIT   ASC | DESC
        function execute(start, limit, order, search)
        {
            // console.log(start, length, order);

            var defered = $q.defer();
            //Make a request to backend api and then call defered.resolve(result);

            // /SELECTSpecific/:TableName/:Start/:Length/:Order
            $http({ 
                url   : 'http://localhost:3000/api/SELECTQPromise/es_officers/'+start+'/'+limit+'/'+order+'/'+search,
                method: 'POST'
            })
            .then(function(result) 
            {                      
                defered.resolve(result);
            })
            .catch(function(err)
            {
                defered.reject(err);
            });


            return defered.promise;
        }
};

后端代码：

router.post('/SELECTQPromise/:TableName/:start/:limit/:order/:search', function(req, res)
{

    function doQuery1()
    {
        var query1 = "SELECT COUNT(*) AS recordsTotal FROM " + req.params.TableName;

        var defered = Q.defer();
        connection.query(query1, function(err, result) //defered.makeNodeResolver()
        {
            if(err)
            {
                defered.reject(err);
            }
            else
            {
                defered.resolve(result[0]);
            }
        });

        return defered.promise;
    }


    function doQuery3()
    {
        var query3 = "SELECT es_officer_id, es_officer_name FROM "+req.params.TableName+
                     " WHERE es_officer_name LIKE '%"+req.params.search+"%'"+
                     " ORDER BY es_officer_id "+req.params.order;//+" LIMIT "+req.params.start+", "+req.params.limit;

        var defered = Q.defer();
        connection.query(query3, function(err, result) //defered.makeNodeResolver());
        {
            if(err)
            {
                defered.reject(err);
            }
            else
            {
                defered.resolve(result);
            }
        });

        return defered.promise;
    }


    Q.all([doQuery1(), doQuery3()]).then(function(result)
    {
        // res.json({"Error" : false, "Message" : "success", [req.params.TableName] : result[1], "recordsTotal": result[0].recordsTotal, "recordsFiltered": result[0].recordsTotal});  
        res.send(result);
    })
    .catch(function(err)
    {
        res.send(err);
    });
});

Answer 1

我已经找到了问题，如果有人在将来遇到同样的问题，我会在这里提到它。

在这一行上，我认为我正在为搜索分配值，而在实际的.value本身。

var search = aoData[5].value;

搜索字符串是.value对象，正确的是

var search = aoData[5].value.value;

现在它的工作非常好。

Angular Datatables服务器端搜索请求正在返回空对象

1 个答案: