cloudflarearchive / backgrid

Finally, an easily stylable semantic HTML data grid widget with a Javascript API that doesn't suck.
http://backgridjs.com
MIT License
2.01k stars 325 forks source link

How to get totalRecords when performing client-side search? #621

Closed Devtr0n closed 8 years ago

Devtr0n commented 8 years ago

I am having trouble getting the correct totalRecords value from my collection when performing a search with Backgrid's Client-Side filter extension.

Specifically, when I use the backspace key on my keyboard.

If I do not use the backspace, and type slowly, this seems to work:

    //Search input field - keyup event
    $("input[name='q']").keyup(function () {

        console.log('searchcontainer input - keyup event');
        console.log($(this).val())
        console.log($(this).val().length)

        var key = event.keyCode || event.charCode;
        if (key == 8) { //'8' == backspace key 
            console.log('backspace was keyed!')

            //how do I refresh the 'totalRecords' property on the collection?
        }

        console.log((_myCollection.state.totalRecords || "0") + " records found."));

        $("#lblRecordsFound").text((_myCollection.state.totalRecords || "0") + " records found.");
    });

It seems like the totalRows skips a collection update(?) when a backspace is fired?

How can I get the current totalRows, when using backspace? Do I need to reset, fetch or refresh the collection? I am unsure. Help?

Devtr0n commented 8 years ago

I ended up getting this to work by modifying the search function in backgrid-filter.js I think my problem was with other javascript conflicting with my key events.

I used this object to get the current record count: col.pageableCollection.state.totalRecords

and then displayed it in the HTML like so:

      var message = " items found.";
      if (col.pageableCollection.state.totalRecords == 1) {
          message = " item found.";
      }
      $("#lblItemRecordsFound").text((col.pageableCollection.state.totalRecords || "0") + message);