3
Answers

Dropdownlist is not working on my DataTable?

Photo of Guest User

Guest User
5y
588
1
Hi Mates
 
I have DataTable with data and want to create dropdownlist to inside, but its not working. Kindly please help me and here is my logic below;.
  1. <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />  
  2.   
  3.   
  4. @section scripts{  
  5.   
  6.     <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>  
  7.       
  8.   
  9.     <script>  
  10.   
  11.         $(document).ready(function () {  
  12.   
  13.             $("#EventsManagementsTable").DataTable({  
  14.   
  15.                 "columnDefs": [  
  16.                     { "width": "5%", "targets": [0] },  
  17.                     { "className": "text-center custom-middle-align", "targets": [0, 1, 2, 3, 4, 5, 6] }  
  18.   
  19.                 ],  
  20.   
  21.                 "serverSide": "true",  
  22.                 "order": [0, "asc"],  
  23.                 "processing": "true",  
  24.                 "language": {  
  25.                     "processing": "processing...... please wait"  
  26.                 },  
  27.   
  28.   
  29.                 "ajax": {  
  30.                     "url": "/Dashboard/GetData",  
  31.                     "type": "POST",  
  32.                     "datatype": "JSON",  
  33.                     "columns": [{  
  34.                         "data": "WhoAttend",  
  35.                         "name": "WhoAttend",  
  36.                         "render": function (data, type, full) {  
  37.                             return '<select id= "dynamic_select" name= "dynamic_select">' +  
  38.                                 '<option id= "0" value= "TrainingType">Select</option>' +  
  39.                                 '<option id= "1" value= "TrainingDescription">Select</option>' +  
  40.                                 '<option id= "2" value= "Price"></option>' +  
  41.                                 '<option id= "3" value= "Value"></option>' +  
  42.                                 '<option id= "4" value= "Facilitator"></option>' +  
  43.                                 '<option id= "5" value= "WhoAttend"></option>' +  
  44.                                 '<option id= "0" value= "RSVP"></option>' +  
  45.                                 '</select>';  
  46.   
  47.                         },  
  48.                          
  49.                     }],  
  50.   
  51.                 },  
  52.                 "columns": [  
  53.                     { "data": "TrainingType", "name": "TrainingType" },  
  54.                     { "data": "TrainingDescription", "name": "TrainingDescription" },  
  55.                     { "data": "Price", "name": "Price" },  
  56.                     { "data": "Venue", "name": "Venue" },  
  57.                     { "data": "Facilitator", "name": "Facilitator" },  
  58.                     { "data": "WhoAttend", "name": "WhoAttend" },  
  59.                     { "data": "RSVP", "name": "RSVP" },  
  60.   
  61.                 ]  
  62.   
  63.   
  64.             });  
  65.   
  66.   
  67.         });  
  68.   
  69.   
  70.   
  71.     </script>  
 

Answers (3)

0
Photo of Laxmidhar Sahoo
NA 10.4k 55.9k 5y
hi
Do not use multiple column .Again I try but not working.The bellow code mrender is working
 
  1. <html>  
  2. <head>  
  3.   <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">  
  4. </head>  
  5. <body>  
  6.   <table id="example">  
  7.   <thead>  
  8.     <tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr>  
  9.   </thead>  
  10.   <tbody>  
  11.   </tbody>  
  12. </table>  
  13.   <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>  
  14.   <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>  
  15.   <script>  
  16.    
  17.   
  18.   
  19. $("#example").dataTable({  
  20.   "aaData":[  
  21.     ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],  
  22.     ["Flippa","http://flippa.com","Marketplace","null"],  
  23.     ["99designs","http://99designs.com","Marketplace","null"],  
  24.     ["Learnable","http://learnable.com","Online courses","null"],  
  25.     ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]  
  26.   ],  
  27.   "aoColumnDefs":[{  
  28.         "sTitle":"Site name"  
  29.       , "aTargets": [ "site_name" ]  
  30.   },{  
  31.         "aTargets": [ 1 ]  
  32.       , "bSortable": false  
  33.       , "mRender": function ( url, type, full )  {  
  34.           return  '<a href="'+url+'">' + url + '</a>';  
  35.       }  
  36.   },{  
  37.         "aTargets":[ 3 ]  
  38.       , "sType": "date"  
  39.       , "mRender": function(date, type, full) {  
  40.           return (full[2] == "Blog")  
  41.                     ? new Date(date).toDateString()  
  42.                     : "N/A" ;  
  43.       }    
  44.   }]  
  45. });  
  46.   </script>  
  47. </body>  
  48. </html>  
 
0
Photo of Guest User
Tech Writer 2.1k 538.9k 5y
WhoAttend
0
Photo of Laxmidhar Sahoo
NA 10.4k 55.9k 5y
hi
Which column fill as dropdownlist 
Next Recommended Forum