Bootstrap-Table Jquery How to edit a column individually in the table load event?

Question

Bootstrap-Table Jquery how to individually edit a column in the table load event?

I have tried unsuccessfully using all.bs.table and data-load-Success events..

for(i=0;i < data.length; i++) {
    total_media = parseFloat(total_media)  +  parseFloat(data[i].lucro);
    data[i].lucro = ' test ' + String(data[i].lucro);
    jQuery("#tabela").bootstrapTable('updateRow', {index: i, row:  data[i] });

I tried that way too :

jQuery(data).each(function(i){
    total_media = total_media + parseFloat(data[i].lucro);
    data[i].lucro = 'test ' + String(data[i].lucro);    
    jQuery("#tabela").bootstrapTable('updateRow', {index: i, row:  data[i] });

and so :

var total_media = data.reduce(function(a, b){
    lucro = b.lucro;
    b.lucro = ' test ' + String(b.lucro);
    jQuery("#tabela").bootstrapTable('updateRow', {index: a, row:  b });
    return a + parseFloat(lucro);
}, 0);  

---

Bootstrap-Table Jquery how to individually edit a column in the table load event?

I have tried unsuccessfully using all.bs.table and data-load-Success events.. Can you help me?

Answer 1

Simples Rafael.

First you will make a function, which stylizes the column, which will be run independently if there was a update, insert etc, so come on, I’ll give you an example. Imagine that there is a table that lists web projects, and one of the information (columns) of these projects is the plans, and depending on the plan, it will have a different stylization.

First, let’s say this column, that it will have a function to execute, that it will be executed when the data is received, for that we use data-formatter="" of Bootstrap Table.

OBS: The value of attr data-formatter will be the name of the function.

Well, after we create the reference on html, let’s go to the Js. let’s create a function that receives value, row e index, this form: function myCustomPlans(value, row, index)

NOTE: The functions for formatting the columns should be outside the Function $(document).ready(function(){);

Well, now we just do the logic of styling the plans. Something like:

function myCustomPlans(value, row, index) {
  var content;
  if (value == "eco") {
    content = "<span style='color: #4caf50'>" + value + "</span>";
  } else if (value == "premium") {
    content = "<span style='color: #fbc02d'>" + value + "</span>";
  } else {
    content = "<span style='color: #03a9f4'>" + value + "</span>";
  }
  return content;
}

According to the value the column will receive, it will be printed with a different color in a span.

With this function that stylizes all cells of a given column ready, we can perform several inserts and updates usually, because after being executed are actions, at the time of printing the content, the function of the data-formatter will be executed.

I hope I’ve helped.