How to get value from each datatable row dropdownlist
Question
I'm working with Datatable. The problem is I need to get all the values from each row's dropdownlist. The datatable have the column 'Company' which the user need to select value from dropdownlist .Now I'm able to get each row's value for Citizen_ID and Tel using the code below.
var rowData = table.rows().data();
var dataArr = [];
$.each($(rowData), function(key,value){ //data
let tempObj = {
Citizen_id: value["Citizen_ID"],
Tel: value["Tel"]
}
dataArr.push(tempObj);
});
How can I get selected value from dropdownlist for all datatable pages?.
1 answers
solution1
0 2021-07-07 17:28:45
I would approach this in a slightly different way.
Some of the data you need can be accessed from the DataTable, but the selected value in each row's drop-down list only exists in the DOM, so you need the related DOM node to access that data.
I would therefore populate the following two variables, at the start:
var rowData = table.rows().data().toArray();
var rowNodes = table.rows().nodes().toArray();
Both of these are populated using DataTables API calls, so the entire table is processed.
This gives you two arrays - one with the DataTables data objects for each row, and the other with the DOM nodes.
Then you can use a traditional for loop to iterate the arrays in parallel, and extract the specific pieces of data you need.
For the drop-down node, you can use a jQuery selector:
let selectedCompany = $(rowNodes[i]).find("select.company option:selected").text();
I used a class (value = company ) in the HTML code for the select , just in case there are multiple different selects in one row.
Here is a demo of the overall approach:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> </head> <body> <div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:100%"> </table> <br> <button id="data_btn" type="button">Get Data</button> </div> <script> var dataSet = [ { "id": "123", "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "id": "456", "name": "Donna Snider", "position": "Customer Support", "salary": "$112,000", "start_date": "2011/01/25", "office": "New York", "extn": "4226" } ]; $(document).ready(function() { var table = $('#example').DataTable( { lengthMenu: [ [2, -1] , [2, "All"] ], data: dataSet, columns: [ { title: "ID", data: "id" }, { title: "Name", data: "name" }, { title: "Office", data: "office" }, { title: "Position", data: "position" }, { title: "Company", defaultContent: '', render: function ( data, type, row, meta ) { if (type === 'display') { return '<select class="company">' + '<option value="Google">Google</option>' + '<option value="Microsoft">Microsoft</option>' + '<option value="Amazon">Amazon</option></select>'; } else { return data; } } }, { title: "Start date", data: "start_date" }, { title: "Extn.", data: "extn" }, { title: "Salary", data: "salary" } ] } ); $("#data_btn").on( "click", function() { var rowData = table.rows().data().toArray(); var rowNodes = table.rows().nodes().toArray(); var dataArr = []; for (i = 0; i < rowData.length; i++) { let selectedCompany = $(rowNodes[i]).find("select.company option:selected").text(); let tempObj = { id: rowData[i].id, name: rowData[i].name, company: selectedCompany } dataArr.push(tempObj); } console.log( dataArr ); }); } ); </script> </body> </html>
When you run the demo, first select a "company" value in each of the drop-downs.
Then click the "Get Data" button.
The resulting object will look similar to the following:
[
{
"id": "123",
"name": "Tiger Nixon",
"company": "Amazon"
},
{
"id": "456",
"name": "Donna Snider",
"company": "Microsoft"
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.