如何通过ajax调用使用jquery数据表

Question

如何将ajax回调与jquery数据表一起使用，即单击时调用函数？

这项工作

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

替换alert( 'You clicked on '+data[0]+'\\'s row' ); 与Ajax通话：

不起作用

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        //alert( 'You clicked on '+data[0]+'\'s row' );

         $.ajax({
                url: '/process',
                data: data[0],
                type: 'POST',
                success: function(response) {
                    $("#response_placeholder").html(response);
                },
                error: function(error) {
                    console.log(error);
                }
         });

    } );
} );

后端

#--app.py----

@app.route('/process', methods=['POST'])
def process_data():
    data =  request.form['data[0]'];
    print data
    return render_template('mypage.html', result=data)

Answer 1

尝试使用这个。

 $('body').delegate('#example tbody tr','click' , function () {


} );

委托有助于在加载dom后添加到dom的元素上添加事件。

将数据放在这样的对象中也很方便

data: {data: data[0]},

并且网址应该包含扩展名

url: '/process.js', // or process.php depends on what extension it has.

对于标准，您应该定义将返回错误的3个属性，例如。

error: function(jqXHR, textStatus, errorThrown) {