Фильтрация и сортировка в Angular JS со списком JS - PullRequest
Новая
       17

Фильтрация и сортировка в Angular JS со списком JS

1 голос
/ 10 октября 2019

У меня есть массив объектов ниже структуры, где CustList - это массив записей о клиентах. Я создал еще 4 переменные, чтобы заполнить раскрывающийся список фильтров. 

//<app.js code>
$scope.CustList = [];
$scope.Customer = {
       "DataCenter":"", 
       "Geo":"",    
       "CustomerName":"",   
       "ESX":"",    
       "TenantKey":"",  
       "Env":"",    
       "Version":""
}
$scope.SaESX = _.uniq(response.data,'ESX').map(a => a.ESX);
$scope.SaEnv = _.uniq(response.data,'Env').map(a => a.Env);
$scope.SaGeo = _.uniq(response.data,'Geo').map(a => a.Geo);
$scope.SaDC = _.uniq(response.data,'DataCenter').map(a => a.DataCenter);
$scope.SaVersion = _.uniq(response.data,'Version').map(a => a.Version);

Мой HTML-код выглядит следующим образом. 

<div id='custByType' class='cardBody' scroll="auto">
    <b>Filters</b>
    <div class='filterBar'>
        <B>Geo:</B>
        <select class='selList' ng-model="Customer.Geo" ng-change='updateList()'>
            <option value="? string:?" selected></option>
            <option ng-repeat="geo in SaGeo" value="{{geo}}">{{geo}}</option>
        </select>
        &nbsp;&nbsp;
        <b>ESX:</b>
        <select class='selList' ng-model="Customer.ESX">
                <option value="? string:?" selected></option>
                <option ng-repeat="ESX in SaESX" value="{{ESX}}">{{ESX}}</option>
        </select>
        &nbsp;&nbsp;
        <b>DataCenter:</b>
        <select class='selList' ng-model="Customer.DataCenter">
                <option value="? string:?" selected></option>
                <option ng-repeat="dc in SaDC" value="{{dc}}">{{dc}}</option>
        </select>
        &nbsp;&nbsp;
        <B>Version:</B>
        <select class='selList' ng-model="Customer.Version">
                <option value="? string:?" selected></option>
                <option ng-repeat="v in SaVersion" value="{{v}}">{{v}}</option>
        </select>
        <button class='btn btn-small btn-primary' ng-click='resetFilter()'>Reset</button>
    </div>
        <div class='searchBar'>
            <span class='alignleft'>
                <button class='btn btn-small btn-primary' onClick='ShowAdd()'>Add All</button>
                <button class='btn btn-small btn-primary'>Add Selected</button>
            </span>
            <span class='alignright'>
                <input class='ALLsearch inpField' style='width:100px;' id='searchSaaS' placeholder="Search"/>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,10)'>10</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,20)'>20</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,50)'>50</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,99999)'>All</button>
            </span>
        </div>
        <table class="newListTable">
        <thead><tr>
            <th></th>
            <th>Tenant Key</th>
            <th>Name</th>
            <th>Geo</th>
            <th>DC</th>
            <th>Env</th>
            <th>Version</th>
            <th></th>
        </tr></thead>
        <tbody class="list" >
            <TR  ng-repeat="cust in CustList | filter:Customer | unique: 'TenantKey'"> <!--  -->
                <td><input type='checkbox'></td>
                <td class="tenantkey" ng-bind='cust.TenantKey'></TD>
                <td class="account" ng-bind='cust.CustomerName'></TD>
                <TD class="geo" ng-bind='cust.Geo'></TD>
                <TD class="env" ng-bind='cust.Env'></TD><td></td>
                <TD class="version" ng-bind='cust.Version'></TD><td></td>
            </TR>
        </tbody>
    </table>
    <ul class='pagination'></ul>
</div>

Я получаю прекрасный результат, когда данные таблицы очень хорошо фильтруютсяиспользуя вейлы из выпадающего списка. Screen Without List.js Теперь, если я добавлю в этот список List.js, вот тогда и начнется проблема. Две причины, по которым я использую List.js: (1) дает мне беспроблемную нумерацию страниц. (2) Дает мне возможность беспрепятственного поиска в списке! 

var optionsSAAS = {
    valueNames:['tenantKey','account','geo','env','version'], 
    searchClass:'ALLsearch', 
    page: 10, 
    pagination:true
};
var custTypeList;

function loadList()
{
    custTypeList = new List('custByType', optionsSAAS);
    custTypeList.show(1,5);
}

without Filter

Проблема: Когда я использую раскрывающийся список для фильтрации, списокфильтруется, но это не рендеринг. На приведенном ниже экране я отфильтровал, используя версию, которая имеет 3 записи After filtering

Как видите, записи не отображаются, а нумерация страниц также отключена. Я предполагаю, что я что-то упустил здесь, не уверен, что. Если я нажму на страницу 1 или что-нибудь еще, она сбросит всю фильтрацию и покажет все записи!

Я пробовал искать в List.js с угловой фильтрацией, но придумал пользовательскую угловую пагинацию / поиск, что многохлопот в кодировании ИМХО. Есть мысли?

...