I need help if it is possible to modify table data before load into table in Tabulator library. I need to convert decimal value of (8 poles)DIP switch to separate 8 bits and load it to table. I have data in json format like this:
[ {"id":1, "name":"DIP1", "value":15}, {"id":2, "name":"DIP2", "value":75} ]
and I would like format data to this (for decimal value 15):
[{"id":1, "name":"DIP1", "sw1":0,"sw2":0,"sw3":0,"sw4":0,"sw5":1,"sw6":1,"sw7":1,"sw8":1,}]
to this table:
columns:[ { title:'ID', field:'id', width:50 }, { title:'DIP NAME', field:'name', headerFilter:'input', editor:'input', hozAlign:'center' }, { title:' DIP SWITCHES', hozAlign:'center', columns:[ { title:'SW1', field:'sw1', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW2', field:'sw2', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW3', field:'sw3', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW4', field:'sw4', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW5', field:'sw5', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW6', field:'sw6', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW7', field:'sw7', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, { title:'SW8', field:'sw8', width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross', headerFilterParams:{"tristate":true}, headerSort:false }, ], } ],
I know how to extract each bit in c:
var sw1 = bitRead( value, 7 ); var sw2 = bitRead( value, 6 ); var sw3 = bitRead( value, 5 ); var sw4 = bitRead( value, 4 ); var sw5 = bitRead( value, 3 ); var sw6 = bitRead( value, 2 ); var sw7 = bitRead( value, 1 ); var sw8 = bitRead( value, 0 );
but I dont know how to do this when data are loaded into table using ajax.
Can somebody help how to do it please?
I am newbie and I cant help myself.
Thank you!
Advertisement
Answer
You can spread the switches to a separate bit values like that:
// You may need to parse (JSON.parse()) if serialized let data = [{ "id": 1, "name": "DIP1", "value": 15 }, { "id": 2, "name": "DIP2", "value": 75 } ] let transformed = data.map(({ value, ...data }, i) => { // toString(2) transforms a number to a binary string // PadStarts adds the zeros on left if neccessary // split converts the string to array of 8 bits let toBits = value.toString(2).padStart(8, "0").split("") // this will create an object of eight bits with according values .reduce((accum, bit, i) => { accum["sw" + (i + 1)] = Number(bit) return accum }, {}) // spread operator will flatten the object return { id: i + 1, ...data, ...toBits, } }) console.log(transformed)
Then, you should be able to use the content transformed
as the table data like that (see http://tabulator.info/docs/4.9/data):
var table = new Tabulator("#example-table", { // ...other options ajaxResponse: function (url, params, response) { //url - the URL of the request //params - the parameters passed with the request //response - the JSON object returned in the body of the response. // `response` might be rather be `response.data` or such... let transformed = response.map(({ value, ...data }) => { let toBits = value .toString(2) .padStart(8, "0") .split("") .reduce((accum, bit, i) => { accum["sw" + (i + 1)] = Number(bit); return accum; }, {}); return { ...data, ...toBits, }; }); return transformed; }, }); table.setData(<YOUR API URL>); // Change to your API endpoint