Tabulator: How do I get table data?

[selobu]

Hi, I like to read the data in the table by using a POST method and python-FLASK

here is the html code

// html code
<form method="post">
    <div>
        <input type="Submit" class="btn btn-success" name="enviar" value="Grabar"/>
    </div>
    <div id="example-table" name="table"></div>
    </form>

My first approach is to use

#python code
if request.method == 'POST':
    form = request.form

The above code works fine and now How to get the table data?

[olifolkerd]

If you are looking to retrieve the data from the table then you want to use the getData method:

var data = $("#example-table").tabulator("getData");

Let me know if that helps

Cheers

Oli

[selobu]

The following code works and displays an alert message

rowDblClick:function(e, row){ //trigger an alert message when the row is clicked
    var iden = row.getData().{{ title[0] }};
    var rowdata = row.getData().id;
    //var data = $("#example-table").tabulator("getData");
    alert('hola ');
    };

But the following code seems to be not working

rowDblClick:function(e, row){ //trigger an alert message when the row is clicked
    var iden = row.getData().{{ title[0] }};
    var rowdata = row.getData().id;
    var data = $("#example-table").tabulator("getData");
    alert('hola ');
    };

[selobu]

Hi, I'm near to get what I need, so I have this code and runs ok on client and server side

var tb = $("#example-table").tabulator({
    fitColumns:true,
    height:320, // set height of table
    //tooltips:false,
    //addRowPos:"top",
    //history:true,
    pagination:"local",
    paginationSize:10,
    movableColumns:false,
    //initialSort:[
    //    {column:"id", dir:"asc"},
    //],
    columns:[{% for pos in range(title.__len__()) %}
        {title:"{{ title[pos] }}", field:"{{ title[pos].replace(' ','_') }}", align:"center"{% if loop.index == 0 %}, width:90{% endif %}, {% if col_check == loop.index %} formatter:"tickCross", sorter:"boolean", editor:false {% endif %} }, {% endfor %}
    ],
    rowDblClick:function(e, row){ //trigger an alert message when the row is clicked
    var iden = row.getData().{{ title[0] }};
    var rowdata = row.getData();
    //var colcheckname = title[col_check]
    //var data = $("#example-table").tabulator("getData");
    //window.location.href = window.location.protocol + "//" + window.location.host + "{{- url_dbclick_redirect -}}"+iden;
    $.ajax({
        url: '{{- url_dbclick_redirect -}}'+iden,
        data: {hora_id: iden},
        type:'POST',
        success: function(response){
        rowdata.{{ title[col_check-1].replace(' ','_') }} = !rowdata.{{ title[col_check-1].replace(' ','_') }};//$("#example-table").tabulator("setData", tabledata);
        tb.tabulator("setData");
        alert('fin');
        },
        error: function(error){
        console.log(error);
        },
    });
    },

The code above is working but It not update the tabulator, I guess the issue could be here

rowdata.{{ title[col_check-1].replace(' ','_') }} = !rowdata.{{ title[col_check-1].replace(' ','_') }};

[selobu]

Thanks I solve it!

var tb = $("#example-table").tabulator({
    fitColumns:true,
    height:320, // set height of table
    //tooltips:false,
    //addRowPos:"top",
    //history:true,
    pagination:"local",
    paginationSize:10,
    movableColumns:false,
    //initialSort:[
    //    {column:"id", dir:"asc"},
    //],
    columns:[{% for pos in range(title.__len__()) %}
        {title:"{{ title[pos] }}", field:"{{ title[pos].replace(' ','_') }}", align:"center"{% if loop.index == 0 %}, width:90{% endif %}, {% if col_check == loop.index %} formatter:"tickCross", sorter:"boolean", editor:false {% endif %} }, {% endfor %}
    ],
    rowDblClick:function(e, row){ //trigger an alert message when the row is clicked
    var iden = row.getData().{{ title[0] }};
    var rowid = row.getData().id;
    var rowdata = row.getData();
    //var colcheckname = title[col_check]
    //var data = $("#example-table").tabulator("getData");
    //window.location.href = window.location.protocol + "//" + window.location.host + "{{- url_dbclick_redirect -}}"+iden;
    {% set colname = title[col_check-1].replace(' ','_') %}
    $.ajax({
        url: '{{- url_dbclick_redirect -}}'+iden,
        data: {hora_id: iden},
        type:'PUT',
        success: function(response){
        rowdata.{{ colname }} = response.visto;//$("#example-table").tabulator("setData", tabledata);
        tb.tabulator("updateRow", rowid, {id:rowid, {{ colname }}:response.visto });
        },
        error: function(error){
        console.log(error);
        },
    });
    },
});