How can I get table without selected row after send POST-request?

irina_ikonn

I do Flask app. I'm using the DataTables with the Select module. I can select and deselect rows fine. I can send POST request by click on button "Save". Selected row displayed correct after reload page. But if I select nothing rows and send POST-request first row of tables will be displayed after reload page. How can I get table without selected row after send POST-request?

views.py

def settings():
    df = pd.DataFrame(list_files, columns=['Name of file'])
    if request.method == "POST":
        response_data = request.form.to_dict()
        pass
    return render_page(html=df.to_html(), template="/template.html")

template.html

<form method="post" novalidate>
    <div>
        <input type="hidden" class="form-control" name="table-data-1" />
        {{ html | safe }}
    </div>
    <input name="btn_save" type="submit" value="{{'Save'}}" class="btn btn-success">
</form>
{% block scripts %}
    {{super()}}
    <script type="text/javascript" src="{{url_for('static', filename='/jquery.dataTables.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='/dataTables.altEditor.free.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.7.0.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='/jquery.dataTables.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='/dataTables.select.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/select_row.js')}}"></script>
{{js|safe}}
{% endblock %}

select_row.js

$(document).ready(function(){
    // сохраняем данные из таблицы
    $('[name=btn_save], [name=btn_accept_changes]').on('click', function() {
        table_data = table_files.rows('.selected').data().toArray()
        $('[name=table-data-1]').val(JSON.stringify(table_data))
    });
    table_files = $('table').DataTable({
        defaultContent: '',
        pageLength: 50,
        responsive: true,
        altEditor: true,
        columnDefs: [
            {
                orderable: false,
                className: 'select-checkbox',
                targets: 0
            }
        ],
        select: true,
        initComplete: function() {
            var api = this.api();
            var selected = localStorage.getItem( 'DataTables_selected' ).split(',');
            selected.forEach(function(s) {
            api.row(s).select();
            })
        }
        });
table_files.on('select.dt deselect.dt', function() {
        localStorage.setItem('DataTables_selected', table_files.rows( { selected: true }).toArray() )
    })
});

allan

I'd need a link to a page showing the issue please.

Allan

irina_ikonn

If I select no row click on button "Save" first row is selected. I need first row is not selected after submit.

kthorngren

Your code snippets and screenshot are not enough to understand your solution to troubleshoot the issue. Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

irina_ikonn

live.datatables.net/culuhago/2/edit
If I do not choose row and click "Run with JS" no rows is selected. If I make first click on row and click "Run with JS" I get page with selected row. Further I deselect row and click on "Run with JS" and I get page with first selected row. If I will not choose rows and click on "Run with JS" I will get page with first selected row. How can I get page without selected first row after reload if I did not select row?

allan

Your selected variable is [""] when rows have been selected previously, but are now selected. That results in api.row("").select() being run, thus why the first row is being selected.

I would suggest you check localStorage.getItem('DataTables_selected' ) for being an empty string before you use it and split it: https://live.datatables.net/culuhago/3/edit .

Allan