jquery - How to pass DataTable data to a Bootstrap modal -


i have jquery data table variable:

 "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>";                     }                   }                 ] 

that shows results of query perfectly. can see, @ end oh table appear column edit button must allow user modify note , status; modified data must send spring controller id of data modify.

my problem not how send controller; solved problem user here on stack.

my problem is: if want { "data": "id" } used, in modal, set data-id on button trigger modal, syntax must use? actual syntax make me error tells "data not defined" when load app. seems if use actual value, data-id=\""+data.id+"\", don't recognize data. notation recall data of data table columns.

edit: markpsmith answer solve problem of data not defined have still problems. solution introduce issue: now, when submit form data, got un "undefined" value on id. analyzing element can note it's undefined before submit data form; after page load, inspecting button value undefined.

i've tried other solution found on web, problem same: data , combination put on data-id not recognized , value set undefined.

you're using render function type not supplying arguments. if @ docs see render() takes 4 parameters, none of optional.

to make code work need change this:

"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>"; } 

the full parameter complete row data, , you're using first column(id), need refer zero-based index.


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -