Radiobuttton with the data of a column as value for the value attribute ?

YoanB

I use Python flask in a web app and use datatable in server side mode to display data. The data can be little as well as high, depending on the user input file. I use your solution because it the best to dont have long loading page causing timeout exception in the app.

With some research I succeed to modify the exemple given by https://github.com/SergioLlana/datatables-flask-serverside that he adapt datatable to Python Flask. I add the mrender in his code to add radio Button.

The code is as follow :

js script (loaded in the web page)

/*jslint browser: true*/
/*global $*/


$(document).ready(function () {
  $('#serverside_table').DataTable({
    bProcessing: true,
    bServerSide: true,
    sPaginationType: "full_numbers",
    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
    bjQueryUI: true,
    sAjaxSource: '/tables/serverside_table',
    columns: [
      {mRender: function (data, type, row) {return '<input type="radio" name="indivdu" value="">';
               }
      },
      {"data": "Column A"},
      {"data": "Column B"},
      {"data": "Column C"},
      {"data": "Column D"}
    ]
  });
});

the html template using by flask with the script section to populate the table

{% extends "template.html" %}
{% block title %}

<title>Serverside Table</title>

{% endblock %}
{% block body %}

<script type="text/javascript" src="/static/js/serverside_table.js"></script>



<div class="table_container">
  <table id="serverside_table" cellspacing="0" class="table table-striped table-bordered" style="width:100%">
    <thead>
      <tr>
        <th id="r1"></th>
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
        <th>Column D</th>
      </tr>
    </thead>
  </table>
</div>

{% endblock %}

the data for this exemple is as follow, generated and provided by the python code at the server side :

DATA_SAMPLE = [
    {'A': 'Hello!', 'B': 'How is it going?', 'C': 3, 'D': 4},
    {'A': 'These are sample texts', 'B': 0, 'C': 5, 'D': 6},
    {'A': 'Mmmm', 'B': 'I do not know what to say', 'C': 7, 'D': 16},
    {'A': 'Is it enough?', 'B': 'Okay', 'C': 8, 'D': 9},
    {'A': 'Just one more', 'B': '...', 'C': 10, 'D': 11},
    {'A': 'Thanks!', 'B': 'Goodbye.', 'C': 12, 'D': 13}
]

returning data like object in json : {'data': DATA_SAMPLE}

I would like just a simple thing because I'm a beginneer in JavaScript and JQuery, Ajax ... etc...

I just want the value of one column are the value in the "value" balise of the radio button to their corresponded row:

for example we can choose the column D as ID and the columns with radio button will have the value of the column D as the value for the value balise

The radio button will be like :

input type="radio" name="indivdu" value="4"
input type="radio" name="indivdu" value="6"
input type="radio" name="indivdu" value="16"
input type="radio" name="indivdu" value="9"
input type="radio" name="indivdu" value="11"
input type="radio" name="indivdu" value="13" "

I note that the ID is just for example , I will use ID provided in the user file formated as follow : @I#@ where # is a number (user file format : https://fr.wikipedia.org/wiki/GEDCOM) I dont use SQL, because of the policy that represent the data .

How I can modify the JS script to have my radiobuttton with the data of a column as value for the value attribute ?

Thanks for all !

Yoan

kthorngren

The columns.render docs explain the parameters for the render function. The row parameter contains the data for the row. Something like this should work:

    columns: [
      {mRender: function (data, type, row) {return '<input type="radio" name="indivdu" value="' + row.D + '">';
               }
      },

Kevin

YoanB

Hello !

Thanks for the repply, I tried and it give me a value , but this values is "undefined" I do to go deeper. I will try this afternoon, it's 4am it will be more clear after a sleep maybe because of the column name ? "D" and "Column D" mapping.

I code a JQuery to do the trick in waiting

$("#serverside_table").on("click", "input[type=radio]", function() {
  var $tds = $(this).closest('tr').find('td');
  var id = $tds.eq(1).text();
  var requestor = $tds.eq(2).text();
  $(this).attr("value", requestor);
  alert(id)
  alert(requestor)
});

I will be back ! Yoan

kthorngren

Sorry, based on your above config it should be row['Column D'] not just row.D. I didn't look close enough at your config.

Kevin