Change TableElement option in Javascript

[MaryvonneMB]

Hi,

I would like to create a "results per page" dropdown in a table I display in a dashboard.
First I create a dropdown input like the following:

<label>Select number of rows</label>
<choice value="10">10</choice>
<choice value="20">20</choice>
<choice value="50">50</choice>
<default>10</default>
</input>
Then in a javascript file I retrieve the value of $row_number$ and naively I tried to change the "count" option of my table to change the table vizualisation

 var tokensDefault=mvc.Components.get('default');
            tokensDefault.on('change:row_number',function (model, value, options) {

                var rowNumber=tokensDefault.get('row_number');
                console.log(rowNumber);
                var resultTable=mvc.Components.getInstance('resultTable');
                resultTable.set('count',rowNumber);
                resultTable.render();
            });

But I have error: like resutTable.set is not a function.
Does anyone have an idea on how I can fix it?
Thanks in advance for any help!

[jeffland]

There are two things about that. First of all, the error you're seeing is most likely because you didn't give your table the id resultTable in Simple XML. You need exactly the same name:

  <row>
    <panel>
      <table id="resultTable">
        <search> ...

"foo.set is not a function" is javascript's way of telling you that resultTable is undefined (pretty obvious, I know). You can verify this if you set a breakpoint on the line where you try to call set() and check what resultTable is. If it's not an object, you didn't "get" it from mvc.Components in the first place. Unfortunately, this is where you have to know js well enough and/or be able to debug it, because mvc.Components.get() doesn't tell you if it was successful. At any rate, giving your table the same id you try to get() in js should solve this problem. Oh and by the way, getInstance() is for getting token models and get() for anything else, see here for docs - however, I just use get() for all things and never had any problems with that.
As soon as that works, what you want to set in order to change the number of rows displayed in your table is an option named pageSize in resultTable.visualization, not in resultTable itself. Code in js would look something like this:

var resultTable = mvc.Components.get("resultTable");
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:count_tok", function(model, value) {
    resultTable.visualization.settings.set("pageSize", value);
    console.log(value);
});

Hope I could be of help 🙂