0

What I want to do is to let my users select multiple rows in a table and them hit a button to send this data back. My JS script file looks has the following:

<script>
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function () {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

$('#example tbody').on('click', 'tr', function () {
    $(this).toggleClass('selected');
});

$('#button').click(function () {
    alert(table.rows('.selected').data().length + ' row(s) selected');
});
// DataTable
var table = $('#example').DataTable({
    initComplete: function () {
        // Apply the search
        this.api()
            .columns()
            .every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            });
    },
});
});
</script>

My HTML code is as follows:

<form action="/get1" method="POST" name = 'input'>
<button id="button">Row count</button>
<table id="example" class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Index</th>
            <th scope="col">Col2</th>
            <th scope="col">Col3</th>
            <th scope="col">Col4</th>
        </tr>
    </thead>
    <tbody>
     {% for item in rows %}
            <tr>
                <td>{{item[0]}}</td>
                <td>{{ item[1] }}</td>
                <td>{{ item[2] }}</td>
                <td>{{ item[3] }}</td>
            </tr>
        {% endfor %}
    </tbody>
<tfoot>
<tr>
                <th>Index</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
            </tr>
</tfoot>
  </table>
</form>

I need some help with JS and HTML to POST values (such as row index) to the backend that the backend can read.

andrewJames
  • 19,570
  • 8
  • 19
  • 51
James Manfield
  • 31
  • 5
  • Using the DataTables [Select extension](https://datatables.net/extensions/select/), which you can get [here](https://datatables.net/download/index), makes it easy to select rows and then see [which rows have been selected](https://datatables.net/reference/api/row().selected()). From there you can access whatever is a suitable unique row ID in the row data. That should provide one starting point. – andrewJames May 13 '22 at 23:07
  • thanks @andrewJames . Can you please help with an example how to integrate this API in JS. I am new to JS. It would be a big help. – James Manfield May 13 '22 at 23:27
  • I added some notes in an answer. Take a look at those, and you should be able to adapt that to your specific code. The Ajax POST part is really a follow-up step, which has many answers already. It is worth spending some time to try this for yourself, to understand how it works. Anyway, hope that helps. – andrewJames May 14 '22 at 00:07
  • No problem, hope it helped. This next point is _completely optional_, but you can consider up-voting and/or accepting answers which you found to be useful. See [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers). Even if there are no useful/acceptable answers to _this_ question, there may be such answers in some of your other questions. But, like I say, voting on - and accepting - answers is _completely optional_. – andrewJames May 17 '22 at 23:29

1 Answers1

0

Let's assume you have added the following DataTables Select resources to the head of your web page:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.js"></script>

Then you can enable the extension by adding the following option to your DataTable:

select: true

Now you can experiment with selecting and de-selecting rows. You can use the CTRL and SHIFT keys to select multiple rows.

In your button click event you can now use the selected() function I mentioned in my comment - for example:

$('#button').click(function () {
  selected_ids = [];
  table.rows().every(function () {
    if ( this.selected() ) {
      selected_ids.push( this.data()[0] );
    }
  });
  console.log( selected_ids );
});

This will capture an array of IDs from the selected rows.

Note how it uses very similar logic to the columns().every() function you already have - except it uses rows().every() to iterate over the rows in the DataTable - not only the visible rows in the current page, but also all rows in other DataTables pages (if there multiple pages of table data).

The next step is a completely different question: How to submit the IDs in that array to your Flask back end.

That has been covered elsewhere in various questions - for example: jQuery Ajax POST example with PHP. Yes, this mentions PHP, but the jQuery piece is independent of the server technology.

That question has 25 answers, and there are various other questions along similar lines, which should help you. If you get stuck you can ask a new question with the specific problem you are facing.

But, basically, instead of my console.log( selected_ids );, you would use a jquery Ajax call: $.ajax( { ... } ); to send the data to Flask.

andrewJames
  • 19,570
  • 8
  • 19
  • 51