How to: Get hidden Id's from Multi selected rows in Datatables?

Putjes

On my MVC page I have a Datatables table. This works fine. The only thing that is not working is how to return a list of Id's that are selected by the user. How to get a comma seperated list of id's that are in the first column that is hidden.
- page

@Inherits WebViewPage(Of bbbb.TestReporter.PortalApplication.ReportViewModel)
@Imports System.Data
@If Model.GridData IsNot Nothing Then
    If Model.GridData.Rows.Count = 0 Then
    @<table class="grouptable" cellpadding="0" cellspacing="0" border="1" width="100%" id="gridContainer">
        <tr>
            <td class="grouptablebottomcell">
                <i>@Resources.ReportGrid.NoDataMessage</i>
            </td>
        </tr>
    </table>
Else
    @<table class="grouptable" cellpadding="0" cellspacing="0" border="1" width="100%" id="gridContainer">
        <tr>
            <td class="grouptablebottomcell">
                @*<input id="selectAllButton" type="button" value="@Resources.ReportGrid.SelectAllButtonText" onclick="javascript: changeRowSelection();" style="width:150px;" />*@
                <input id="generate" type="button" value="@Resources.ReportGrid.GenerateButtonText" onclick="javascript: generateReport();" />
            </td>
            <td style="vertical-align: middle; width: 50%;">
                <i id="GridSelectionMessage" style="display: none;">@Resources.ReportGrid.SelectRowsMessage</i>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table id="GridTabel">
                    <thead>
                        <tr>
                            @For Each col As DataColumn In Model.GridData.Columns
                                @<th>@col.ColumnName</th>
                            Next
                        </tr>
                    </thead>
                    <tbody>
                        @For Each row As DataRow In Model.GridData.Rows
                            @<tr>
                                @For Each item As Object In row.ItemArray
                                    @<td>@item</td>
                                Next
                            </tr>
                        Next
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    Using Html.BeginForm("GetReportBasedOnSelectedKeys", "Report", FormMethod.Post, New Dictionary(Of String, Object) From {{"id", "reportForm"}, {"name", "reportForm"}, {"target", "_blank"}, {"style", "margin: 0;"}})
    @<input id="reportId" name="reportId" type="hidden" value="" />
    @<input id="presentationFormId" name="presentationFormId" type="hidden" value="" />
    @<input id="selectedKeyIds" name="selectedKeyIds" type="hidden" value="" />
End Using
    @<script type="text/javascript">
                    function generateReport() {
                        showGridSelectionMessage(false);
                        var selectedKeyIds = fnGetSelected() 'Here I want the Id's to be Selected from de oData'
                        if (selectedKeyIds == "") {
                            showGridSelectionMessage(true);
                        }
                        else {
                            $("#reportId").val($("#reportsSingleSelect").val());
                            $("#presentationFormId").val($("#presentationFormsSingleSelect").val());
                            $("#selectedKeyIds").val(selectedKeyIds);
                            $("#reportForm").submit();
                        }
                    }

                    function showGridSelectionMessage(show) {
                        $('#GridSelectionMessage').css("display", (show ? "block" : "none"));
                    }

                </script>

                End If
    @<script type="text/javascript">
        var oTable
        var aTableData
        $(document).ready(function () {
                     oTable = $('#GridTabel').dataTable({
                            "columnDefs": [
                                {
                                    "targets": [0],
                                    "visible": false,
                                    "searchable": false
                                }
                            ],
                            //"bServerSide": true,
                            //"sAjaxSource": "Report/GetAjaxData",
                            //"bProcessing": true,
                            "language": {
                                "emptyTable": "Geen gegevens gevonden",
                                "info": "Toont _START_ tot _END_ van _TOTAL_ records",
                                "infoEmpty": "Toont 0 tot 0 van 0 records",
                                "infoFiltered": "(Gefilterd uit _MAX_ totaal aantal records)",
                                "infoPostFix": "",
                                "thousands": ".",
                                "lengthMenu": "Toont _MENU_ records per pagina",
                                "loadingRecords": "Laadt...",
                                "processing": "Bezig...",
                                "search": "Zoeken:",
                                "zeroRecords": "Geen overeenkomende records gevonden",
                                "paginate": {
                                    "first": "Eerste",
                                    "last": "Laatste",
                                    "next": "Volgende",
                                    "previous": "Vorige"
                                }
                            },
                            dom:  'T<"clear">lfrtip',
                            tableTools: {
                                "sRowSelect": "multi",
                                "aButtons": ["select_all", "select_none"]
                            },
                            "searching": false,
                            "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "Alles"]]
                     });
                     

            /* Get the rows which are currently selected */
                     function fnGetSelected(oTableLocal) {
                         var aReturn = new Array();
                         var aTrs = oTableLocal.fnGetNodes();
                         var dTrs = oTable.fnGetData();
                         for (var i = 0 ; i < aTrs.length ; i++) {
                             if ($(aTrs[i]).hasClass('DTTT_selected')) {
                                 //var t = $(tr).data('KeyId');
                                 aReturn.push(aTrs[i]);
                             }
                         }
                         return aReturn;
                     }


                     @*$('#generate').click(function () {
                         var sData = fnGetSelected(oTable);
                        
                        $.post("@Url.Content("~/Report/GetReportBasedOnSelectedKeys")", sData, function() {
                            // success!
                        }, "json");

                        //alert(sData);
                        });*@
                   
                    $('#GridTabel tbody').on('click', 'tr', function () {
                        $(this).toggleClass('selected');
                    });
        });
  </script>
  @<script>

                    function hideGrid() {
                        $("#gridContainer").remove();
                    }

                  
  </script>
End If

Putjes

Oops sorry... the html is not looking so okay on this post...

allan

In your fnGetSelected function you are getting the nodes and data for the selected rows - so just use the same method to get the id's or the id from the data would you not?

Allan

Putjes

Thanks for your reply...Allan

Mixed up two things:

                     function fnGetSelected(oTableLocal) {
                         var aReturn = new Array();
                         var aTrs = oTableLocal.$('tr.DTTT_selected');
                         for (var i = 0 ; i < aTrs.length ; i++) {
                             aReturn.push(oTable.fnGetData(aTrs[i])[0]);
                         }
                         return aReturn;
                     }


                     $('#generate').click(function () {
                         showGridSelectionMessage(false);
                         
                         var rowData = fnGetSelected(oTable);
                         console.log(rowData[0]);
                             if (rowData == null || rowData =='') {
                                 showGridSelectionMessage(true);
                             }
                             else {
                                 $("#reportId").val($("#reportsSingleSelect").val());
                                 $("#presentationFormId").val($("#presentationFormsSingleSelect").val());
                                 $("#selectedKeyIds").val(rowData);
                                 $("#reportForm").submit();
                             }
                        });

And that is the answer to my 'problem'

Regards,
Ronald.