Search with lazy loaded

[anivaisu]

Hi,

I was created a table with lazy loading.

I need search with global terms.

I read this [(https://github.com/hjalmers/angular-generic-table/wiki/Lazy-loading-and-table-info)].

here is my function

 getData = function(pageCurrent, recordLength){

    this.userService.getUsers(this.at).subscribe(users => {
      var TotalRecords=users.length;
      this.userService.getUsersLimit(pageCurrent, recordLength).subscribe(users=>{
        this.users = users;
        this.userService.getRoles(this.at).subscribe(roles => {
          var roles = roles;
          for(var i in this.users) {
            if(this.users[i].APART_ID === this.aid) {            
              var rolename = roles.filter(role => role.ROLE_ID === this.users[i].ROLE_ID);
              this.configObject.data.push({
                 // id:users[i].id,
                  name: this.users[i].FIRST_NAME + " " + this.users[i].LAST_NAME,
                  role: rolename[0].ROLE_NAME,
                  email: this.users[i].EMAIL,
                  mobile: this.users[i].MOBILE1,
              })

              this.configObject.info = <GtInformation>{
                      pageNext: 2,
                      pageCurrent: 1,
                      pagePrevious: null,
                      recordLength: 5,
                      recordsAfterFilter: TotalRecords, 
                      recordsAfterSearch: TotalRecords,
                      recordsAll: TotalRecords, 
                  }
              console.log("info",this.configObject.info);
              console.log("///",this.configObject.data)
            }
          }
        })
      })
  })

    console.log("this///",this.configObject);
  }

I try to this

this.configObject.info.searchTerms = server response data.

my server returned to this data.

[
  {

        "name":"Tes",
        "Email":"Test@gmail.com",
        "Role":"Rle"
 },
  etc
]

How can i set filter/searchterm. I dont understand.Give me some idea.

Thanks

[Paul75]

Hello,

I have a doubt but I think your server must response :

[
    {
        'name':'Test',
         'Email':'Test@gmail.com',
         'Role':'Rle'
    },
    ....
]

Because your's not validate Json ....

[anivaisu]

Thanks for ur rrply.my server response is json data.how can I set searchTerms? or filter

[hjalmers]

Hi @anivaisu and sorry for my late reply. A lot of the logic in your code should be moved to the server side if you want to lazy load the data from a server. Now you're making the client a bit too smart and when new data is fetched from the server you shouldn't push it to the data array as it will most likely break things. I haven't set up a real server to handle the server side part of the lazy loading example but you could use the mocked endpoints as a reference as to what the server should return and what parameters you should pass to it when requesting data.

Request first page and display 10 records: /data?page=1&per_page=10

Request second page and display 10 records: /data?page=2&per_page=10

and so on...

Depending on your data and the requirements you have you could pass other query parameters to, like filters, search terms etc. it's all depends on the api you setup for your backend).

But it should return something like:

    {
        "info": {
            "pageNext":3,
            "pageCurrent":2,
            "pagePrevious":1,
            "recordLength":10,
            "recordsAfterFilter":100,
            "recordsAfterSearch":100,
            "recordsAll":100,
            "searchTerms":"al"
        },
        "data": [
                {"id":11,"first_name":"Sandra","last_name":"Harper","email":"sharpera@home.pl","gender":null,"favorite_color":"#808613","birthday":"2008-09-07T06:54:55Z"},
                {"id":12,"first_name":"Jeffrey","last_name":"Sanders","email":"jsandersb@addtoany.com","gender":"Male","favorite_color":"#37056e","birthday":"1972-01-20T09:35:39Z"},
                {"id":13,"first_name":"Todd","last_name":"Powell","email":"tpowellc@i2i.jp","gender":"Male","favorite_color":"#aa2330","birthday":"1993-11-25T19:30:52Z"},
                {"id":14,"first_name":"Gerald","last_name":"Gonzalez","email":"ggonzalezd@twitpic.com","gender":"Male","favorite_color":"#d1694b","birthday":"1982-02-21T00:55:10Z"},
                {"id":15,"first_name":"John","last_name":"Johnson","email":"jjohnsone@gmpg.org","gender":"Male","favorite_color":"#a7d88e","birthday":"1980-11-05T08:15:37Z"},
                {"id":16,"first_name":"Jennifer","last_name":"Lane","email":"jlanef@tmall.com","gender":"Female","favorite_color":"#175fd9","birthday":"1982-10-31T23:46:29Z"},
                {"id":17,"first_name":"Keith","last_name":"Reed","email":"kreedg@cocolog-nifty.com","gender":"Male","favorite_color":"#6d23cd","birthday":"1975-09-01T06:15:30Z"},
                {"id":18,"first_name":"Nicole","last_name":"Frazier","email":"nfrazierh@domainmarket.com","gender":"Female","favorite_color":"#0c1564","birthday":"1978-07-06T19:45:19Z"},
                {"id":19,"first_name":"Cynthia","last_name":"Ortiz","email":"cortizi@surveymonkey.com","gender":"Female","favorite_color":"#99a7d5","birthday":"1997-11-16T17:27:59Z"},
                {"id":20,"first_name":"Christine","last_name":"Murphy","email":"cmurphyj@berkeley.edu","gender":"Female","favorite_color":"#fa936b","birthday":"2004-07-21T19:03:10Z"}
                ]
    }

Your request should look something like this:

public getData = function(pageCurrent, recordLength, searchTerms){
        const params = new HttpParams()
            .set('page', pageCurrent)
            .set('per_page', recordLength);
            .set('search_terms', searchTerms);

        // if we have an ongoing request cancel it
        if (typeof this.req !== 'undefined') {
            this.req.unsubscribe();
        }

        // create a new request
        this.req = this.http.get(this.url, {
            params: params
        })
            .subscribe(res => {
                this.configObject.data = res.data;
                this.configObject.info = <GtInformation>res['info'];
            });
    };

Note that we're just reassigning the data and info from the server response. If you want to keep data from previous requests to avoid fetching them again while using pagination etc. set cache option to true.