My HTML table is looks like below,
<thead>
<tr>
<th>Token Name</th>
<th>Group ID</th>
<th>Token ID</th>
<th>TokenValue</th>
</tr>
</thead>
<tbody>
<tr>
<td>p_freq_shape_opt_txt</td>
<td>7571</td>
<td>67420</td>
<td>rddawq</td>
</tr>
<tr>
<td>p_guar_shape_opt_text</td>
<td>7571</td>
<td>67421</td>
<td>rweAJGJG</td>
</tr>
<tr>
<td>p_freq_shape_opt_txt</td>
<td>7571</td>
<td>67420</td>
<td>rddawq1</td>
</tr>
<tr>
<td>p_guar_shape_opt_text</td>
<td>7571</td>
<td>67421</td>
<td>rweAJGJG1</td>
</tr>
<tr>
<td>p_outerrormsg</td>
<td>80032</td>
<td>8000012</td>
<td>aaaa</td>
</tr>
<tr>
<td>p_companyname</td>
<td>80032</td>
<td>8003201</td>
<td>ABC</td>
</tr>
<tr>
<td>p_fullname</td>
<td>80032</td>
<td>8003202</td>
<td>ABC Life Limited</td>
</tr>
<tr>
<td>p_outerrormsg</td>
<td>80032</td>
<td>8000012</td>
<td>bbbb</td>
</tr>
<tr>
<td>p_companyname</td>
<td>80032</td>
<td>8003201</td>
<td>CCCCC</td>
</tr>
<tr>
<td>p_fullname</td>
<td>80032</td>
<td>8003202</td>
<td>ABC Life Limited</td>
</tr>
</tbody>
End user will have an option choose the group_IDs from the selector. Based on the selection table should populate those group_id values only. I have tried as below ,however if user changed the search value it will show all group_id value.
It should show only the selected group_id row's data and search box should be available for the user too. For example if user selects group id as "7571" then all relevant rows for 7571 should show. And when user changes to "80032" then table should show all relevant rows for 80032 I tried with remove rows but no luck.
Any help would be highly appreciated.
('#itemSelect' + j).change(function () {
var value = $(this).val().toString().split(" ");
var aa = $(this).val().toString().split(" ");
//var strSplit = value.split(" ");
alert('Please check the value ' + value);
var strSplit = value[1];
$('#tableGroupTable' + j).DataTable({
"ordering": false,
"pageLength": 7,
"bLengthChange": false,
"bDestroy": true,
"search": { "search": value[1] }
});
````
