如何使用带有ajax调用的jquery数据表

时间:2017-06-05 22:17:12

标签: javascript jquery ajax flask datatables

如何使用带有jquery数据表的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调用替换alert( 'You clicked on '+data[0]+'\'s row' );

不工作

$(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)

1 个答案:

答案 0 :(得分:2)

尝试使用它。

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


} );

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

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

data: {data: data[0]},

并且网址应该包含扩展程序

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

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

error: function(jqXHR, textStatus, errorThrown) {