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
Post a Comment