提交datatable中选定行的标题

wooyq4lh  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(274)

我有一个web应用程序,使用django作为后端,使用普通html作为前端。对于分页,我使用了datatable,但是分页是在页面中加载所有数据之后出现的,所以有点慢。
当选择表格的行时,它在mycase中高亮显示,我如何提交所选行的标题?

<form  ref="form" id="myform" method="post" action="/tag_course/">
        <table id="myTable">
            <thead>
            <tr>
                <th>Course Material Title</th>
                <th>Author/Editor</th>
                <th>Edition</th>
                   <th>iSBN</th>
                <th>e-iSBN/VBID</th>
                <th>Material Format</th>
            </tr>
            </thead>
            <tbody>
            {% for book in query_results_book.all  %}
            <tr>
                <td>{{ book.title }}</td>
                <td>{{ book.author }}</td>
                <td>{{ book.edition }}</td>
                <td>{{ book.isbn }}</td>
                <td>{{ book.e_isbn }}</td>
                <td>{{ book.Format_issued }}</td>
                               </tr>
            {% endfor %}
            </tbody>
        </table>
    </form>
<button class="button2"  onclick="submit()">Submit</button>

<script>
              $(document).ready(function() {
        $('#myTable').DataTable({info: false, bLengthChange: false});
        var table = $('#myTable').DataTable();
         $('#myTable tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
    } );
</script>
lsmd5eda

lsmd5eda1#

实现这一点的方法有很多,其中最简单的方法就是添加一个自定义 data-attr 在您的表格中,您可以选择:

<tr>
    <td data-title="Title">{{ book.title }}</td>
    <td data-title="Author">{{ book.author }}</td>
    <td data-title="Edition">{{ book.edition }}</td>
    <td data-title="ISBN">{{ book.isbn }}</td>
    <td data-title="E ISBN">{{ book.e_isbn }}</td>
    <td data-title="Format Issued ">{{ book.Format_issued }}</td>
</tr>

还有这个 data-title 使用类似以下代码的值:

$(this).find('td').attr('data-title');

$(this).find('td').data('title');

相关问题