Search code examples
dynamically-generatedrow-numbertabulator

how to refresh rownum in tabulator js?


I want to refresh row number automatically. after deleting single row. for now i have {title:"Question no", field:"no", sorter:"number", width:200, editor:false, htmlOutput:true, formatter:"rownum"}

I want to refresh row numbers in this column. for remove function i have another column to remove single rows, so at the end of each row there is button to remove it.

{title:"Remove", formatter:"buttonCross", width:40, align:"center", cellClick:function(e, cell){cell.getRow().delete();}}

So i want to refresh row numbers after any single row get deleted!


Solution

  • From your first column definition (title:"Question no", field:"no", sorter:"number", width:200, editor:false, htmlOutput:true, formatter:"rownum"}), there appears to be a bit of conflict... do you want the column to get the number from the "no" field of your data source objects (field:"no"), or do you want it to be a rownum formatter (formatter:"rownum")?.

    If your data source entries contain a "no" field, then the cells in your Question no column are coming from your data source (in the "no" field" within each document) and this means that in your cellClick function where you delete rows, you would need to add code that it manipulates the original datasource objects to update the value of the "no" field in each record in order to change the row number in the table. This would be a lot of extra work on your part.

    As an alternative, if your data source records do not have a "no" field, then you should change remove the "field:"no"" property from your column definition and the row will be assigned the row index number and will automatically be updated when a row is removed.

    See this jsfiddle: https://jsfiddle.net/jerren_s/897dtsye/1

    The first column definition is just a definition for the row number formatter and doesn't include a field property... this is what I suggest you use. The second column is my guess at your problem (since you haven't provided your data source). The "field: 'id'" property in the column definition uses the number in the data source records and therefore doesn't change when a row is removed.