CODEWITHSUNDEEP
javascripthtmlangularjs
Vadim Denisuk
Vadim Denisuk

Reputation: 446

How to sort out the data in the table after the data was loaded from the data base?

I have data in a database and it is displayed on the page. It is necessary to sort the data out pressing the column title.

After opening the page we see an empty table which is filled with data from the database within 5~10 seconds.

If I use a plugin AngularJS dataTables and insert the tag datatable="ng", one can see icons for sorting but after pressing any of the icons make the table invisible.

Here's the code.

<div class="table-responsive">
    <table class="table table-striped" ng-controller="mostPopularsTableController">
        <thead ibox-tool>
            <tr ts-repeat>
                <th>Title</th>
                <th></th>
                <th>Link</th>
                <th>Network</th>
                <th>Count</th>
                <th>Clicks</th>
                <th>CTR</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in mostPopulars">
                <td><img src="{{data.TopImages}}" width="50" height="50" /></td>
                <td><b>Description:</b>{{data.Title}}</td>
                <td>
                    <a href="{{data.Link}}"><img src="./img/link.png" width="15" height="15" /></a>
                </td>
                <td>{{data.NetworkName}}</td>
                <td>{{data.Count}}</td>
                <td>{{data.Adclicks}}</td>
                <td>{{data.AdCtr}}</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 0

Views: 115

Answers (3)

swati gupta
swati gupta

Reputation: 92

You can use jquery libraries for it. One of the good one is

https://datatables.net/examples/basic_init/table_sorting.html

It supports client side as well as server side sorting using ajax.It is very easy to integrate.

Upvotes: 1

Anil Sharma
Anil Sharma

Reputation: 2962

I am not sure but you are doing something wrong here .

Take a look at this : http://l-lin.github.io/angular-datatables/#/zeroConfig

and don't forget to use datatable="" directive for table.

If still you are getting some error then help us with some fiddle so we can take a look.

Cheers

Upvotes: 1

Ivo Georgiev
Ivo Georgiev

Reputation: 26

You can sort it in your javascript before displaying it on the page using the orderBy angularJS functionality:

Please look at this link for more information.

Or if it is already displayed on the page in the table tags you can use a js plugin. I personally recommend and am using this plugin:

Datatables

Upvotes: 1

Related Questions