CODEWITHSUNDEEP
htmlangularjssmart-table
Michael
Michael

Reputation: 318

smart-table st-sort only sorting half

I am using smart-table to display a table of employee names, extensions, etc. My data loads fine, but when I try and sort using st-sort it only sorts the top half of the rows. Always half, always the top.

Here's the html code snippet with the table:

<div class="col8" ng-controller="employeeCtrl">
    <table st-table="employeesCollection" st-safe-src="employeesCollection" class="table table-striped">
        <thead>
            <tr>
                <th st-sort="firstName" st-skip-natural="true">First Name</th>
                <th st-sort="lastName" st-skip-natural="true">Last Name</th>
                <th st-sort="extension" st-skip-natural="true">Extension</th>
                <th st-sort="city" st-skip-natural="true">Store City</th>
                <th st-sort="number" st-skip-natural="true">Store Number</th>
            </tr>
            <tr>
                <td>
                    <input type="text" id="FirstName" size="10" ng-keyup="searchEmp()" /></td>
                <td>
                    <input type="text" id="LastName" size="10" ng-keyup="searchEmp()" /></td>
                <td>
                    <input type="text" id="Extension" size="10" ng-keyup="searchEmp()" /></td>
                <td>
                    <select id="store" onchange="searchEmp()">
                        <option value=''>Select City</option>
                        <% For Each city In cityList%>
                        <option value="<%=city%>"><%=city%></option>
                        <% Next%>
                    </select></td>
                <td>
                    <select id="storeNo" onchange="searchEmp()">
                        <option value=''>Select Store</option>
                        <% For Each store In storeList%>
                        <option value="<%=store%>"><%=store%></option>
                        <% Next%>
                    </select>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employeesCollection">
                <td ng-repeat="col in employee track by $index">{{col}}</td>
            </tr>
        </tbody>
    </table>
</div>

Anybody got any ideas?

Upvotes: 0

Views: 342

Answers (1)

Bata
Bata

Reputation: 651

One thing I am noticing, and it may be the issue, is that you are using the same collection in the st-table directive and st-safe-src directive. If you are working with async data, you need to set as in documentation:

st-table="displayedCollection" st-safe-src="rowCollection"

And in your controller:

$scope.displayedCollection = [].concat($scope.rowCollection);

Upvotes: 1

Related Questions