0

次のように、ドキュメントの準備ができたときに現在読み込まれるブートストラップ JavaScript テーブルがあります。

$(document).ready(function(){
    $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 600,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 20,
    pageList: [20, 40, 60, 100, 200],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'ID',
        title: 'ID',
        align: 'center',
        visible: false
    },{
        field: 'title',
        title: 'Title',
        align: 'center',
        sortable: true,
        width: '20'
    },{
        field: 'audio', 
        title: 'Audio',
        align: 'center',
        width: '20'
    },{
        field: 'sheet1',
        title: 'Sheet 1',
        align: 'center',
        width: '20'
    },{
        field: 'sheet2',
        title: 'Sheet 2',
        align: 'center',
        width: '20'
    },{
        field: 'sheet3',
        title: 'Sheet 3',
        align: 'center',
        width: '20'
    },{
        field: 'lyrics',
        title: 'Lyrics',
        align: 'center',
        width: '20'
    },{
        field: 'sheet1notes',
        title: 'Notes 1',
        align: 'center',
        width: '20'
    },{
        field: 'sheet2notes',
        title: 'Notes 2',
        align: 'center',
        width: '20'
    },{
        field: 'sheet3notes',
        title: 'Notes 3',
        align: 'center',
        width: '20'
    }],
    aoColumnDefs: [{
        bSearchable: false,
        bVisible: true,
        aTargets: [0]
    }]

    });
});

ページの他の部分でテーブルをリロードしたいと思います。私の考えは、この関数を起動できるハンドラーをいくつか用意することです。たぶん、.click()またはそれ.change()を行うでしょう。しかし、複数のハンドラーが同じ関数を起動できるかどうかはわかりません。

の後にテーブルを更新したい ajax 呼び出しの例を次に示しますsuccess。

$( "#addnewsong" ).on( "submit", function( event ) {
    $('.newsongupprog').replaceWith('<i class="fa fa-spin fa-spinner"></i>');
    thisdata = new FormData($("#addnewsong")[0]);
    $.ajax({
        url: "multiple_upload_ac.php?",
        data: thisdata,
        type : "post",
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            $('.fa-spinner').replaceWith('<i class="fa fa-check"></i>');
            $('.fa-check').replaceWith('<i class="fa fa-cloud-upload"></i>');
            if (data == 'go') {
                data = "Your song has been uploaded";   
            } else {
                data = "There was a problem uploading some of your files, please search for your song title and add your files manually";   
            }
            $('div.alert3').fadeIn();
            $('div.alert3').html(data);
            $('div.alert3').delay(5000).fadeOut();

            $table.bootstrapTable('refresh', {
                url: 'bootstrap_database.php'
            });
        },
    });
    return false;
});

これに対する私のアプローチはかなり外れていると感じているので、専門家にこれを明らかにしてもらうことができますか.

4

1 に答える 1

1

AJAXコールバックで変数(テーブル) を使用する前に$table、変数を宣言する必要があります。refreshsuccess

$(document).ready(function(){

    // declare $table variable:
    var $table = $('#table-javascript').bootstrapTable({
        // ... configuration ...
    });

    //then submit event handler:
    $( "#addnewsong" ).on( "submit", function( event ) {
       // ...
    });

});
于 2015-04-17T18:00:08.050 に答える