2017-07-28 1 views
0

へのDataTableのデータを渡すために:完全にクエリの結果を示しは、どのように私は、この変数でjQueryのデータテーブルを持っているブートストラップモーダル

"columns": [ 
        { "data": "id" }, 
        { "data": "date" }, 
        { "data": "type" }, 
        { "data": "name" }, 
        { "data": "user_name" }, 
        { "data": "status" }, 
        { "data": "closing_date" }, 
        { "data": "info" }, 
        { "data": "note" }, 
        { "render": function() { 
          return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\""+data.id+"\" data-target='#myModal'> Edit </button>"; 
        } 
        } 
       ] 

を。ご覧のように、最後にテーブルには編集ボタンが付いた列が表示されます。このボタンでは、ユーザーがメモやステータスを変更できるようにする必要があります。この変更されたデータは、変更するデータのIDを持つSpringコントローラに送信する必要があります。

私の問題はコントローラへの送信方法ではありません。私はスタック上のユーザーのおかげでこの問題を解決しました。

私の問題は:{ "data": "id" }が使用され、モーダルでは、モーダルをトリガーするボタンにdata-idを設定するには、どのような構文を使用する必要がありますか?実際の構文では、アプリケーションを読み込むときに「データが定義されていません」というエラーが表示されます。私が実際の値data-id=\""+data.id+"\"を使用すると、データを認識しないようです。データ表の列のデータを呼び出すための表記法。

編集:markpsmithの答えは、定義されていないデータの問題を解決しますが、私はまだ問題があります。 彼のソリューションは別の問題を導入します:今、私がフォームデータを提出するとき、私はidにundefined値を得ました。要素を分析すると、データフォームを送信する前に定義されていないことに気づくことができます。ページがロードされた直後に、ボタンを調べるとその値は未定義です。

私はウェブ上にある他の解決方法を試しましたが、問題は常に同じです。私がdata-idに置いたすべてのデータと組み合わせは認識されず、この値は未定義に設定されています。

+0

ご覧ください。https://stackoverflow.com/questions/13524107/how-to-set-data-attributes-in-html-elements – Dacklf

答えて

1

renderを関数型として使用していますが、引数を指定していません。 を見ると、render()には4つのパラメータがあり、いずれもオプションではありません。

"render": function (data, type, full, meta) { 
    return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\"" + full[0] + "\" data-target='#myModal'> Edit </button>"; 
} 

fullパラメータは、完全な行データである、そしてあなたが最初の列(ID)を使用しているとして、あなたが参照する必要があります。

は、あなたがこれにそれを変更する必要があなたのコードを動作させるために、これにゼロベースのインデックスを付けます。

+0

ありがとうございました。これはデータ未定義の問題を解決します。今は別のものがありますが、これは別の話です。 –

関連する問題