B4J Question [WebApp] Datatable integration and row selection

[ziovec]

Hello there!
Two main questions for you

1)
Following the ServerExample by Erel I managed to fill a 3 column table with a HUGE query (about 1500 rows...).
I noticed that in those example Erel uses Datatable. I digged a little bit and found out there's a new version, with some spicy things included (primarly I'm very interested in the search function).
I tried to implement the new Datatable, but I still get the "classic" one, without the marvellous search function...any tips?

2)
Also following the same example, I tried to implement the function that let you select a row and change its color, but without success.
I copied the css files (changing the table ID accordingly, of course).

Some code below

Sub FillTable(jq As JQueryElement, rs As ResultSet)
    Dim data As List
    data.Initialize
    Do While rs.NextRow
        Dim row As List
        row.Initialize
        For a = 0 To rs.ColumnCount - 1
            Dim val As String = rs.GetString2(a)
            row.Add(val)
        Next
        data.Add(row)
    Loop
    rs.Close
    jq.RunMethod("dataTable", Array As Object(CreateMap("aaData": data, "bFilter": False, _
        "bPaginate": True)))
    'bind the selection changed event to the students table
    ws.RunFunction("addSelectionToTable", Array As Object(tabella.Id, "TableView1_SelectedRowChanged"))

End Sub

FillTable(tabella, sql.ExecQuery("SELECT Cod, ListDesc, ListDescII FROM ANG_Prod"))

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>  

<script>
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
        b4j_connect("/ws");
    });
        //add selection feature to DataTables: http://datatables.net/examples/api/select_single_row.html
    /***************************************************/
    function addSelectionToTable(id, eventName) {
       
        $(id + " tbody").click(function(event) {
            if (typeof event.target.parentNode._DT_RowIndex != 'undefined') {
                setSelectedRow(id, event.target.parentNode._DT_RowIndex);
                b4j_raiseEvent(eventName.toLowerCase(), {row : event.target.parentNode._DT_RowIndex});
            }
       });
       
    }
    function setSelectedRow(id, row) {
        var oTable = $(id).dataTable( );
        $(oTable.fnSettings().aoData).each(function (){
            $(this.nTr).removeClass('row_selected');
        });
        var aTrs = oTable.fnGetNodes();
      $(aTrs[row]).addClass('row_selected');
    }
    function getSelectedRow(id) {
        var aReturn = new Array();
        var oTable = $(id).dataTable( );
        var aTrs = oTable.fnGetNodes();
        for ( var i=0 ; i<aTrs.length ; i++ )
        {
            if ( $(aTrs[i]).hasClass('row_selected') )
            {
                return i;
            }
        }
        return -1;
    }
    /**********  dataTable selection feature ******/</script>



<table id="tabella">
            <thead>
                <tr>
                    <th>Codice Articolo</th>
                    <th>Articolo</th>
                    <th>Vaso</th>
                </tr>
          </thead>
        </table>

 

[TILogistic]

do you want to do this?

Extensions

DataTables example - Basic Initialisation

datatables.net

Extensions

datatables.net

in

https://www.b4x.com:51041/dbutils/index.html

 

[ziovec]

do you want to do this?

Extensions

DataTables example - Basic Initialisation

datatables.net

Extensions

datatables.net

in

https://www.b4x.com:51041/dbutils/index.html

YES.

The problem is that if I initialize the table in this way in the html

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Qlfrtip'
    });
});

as soon as I call the function I got an error from Datatable that says that the table cannot be re-initialized

 

[TILogistic]

YES.

The problem is that if I initialize the table in this way in the html

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Qlfrtip'
    });
});

as soon as I call the function I got an error from Datatable that says that the table cannot be re-initialized

See:

    tblFailedTests.RunMethod("dataTable", Array As Object( _
        CreateMap("bFilter": False, "bPaginate": False, "sScrollY": "200px", "bSort": False)))

 

[TILogistic]

You

jq.RunMethod("dataTable", Array As Object(CreateMap("aaData": data, "bFilter": True, _
"bPaginate": True)))

Sample

CreateMap("bFilter": True, "bPaginate": False, "sScrollY": "200px", "bSort": False)))

 

[TILogistic]

sample:

 

[TILogistic]

help:

Options

datatables.net

 

[ziovec]

help:

Options

datatables.net

Thank you very much!
At this point I need help with the row selection!
I don't understand what I'm missing

 

[ziovec]

Another thing I don't get is the following:

jq.RunMethod("dataTable", Array As Object(CreateMap("aaData": data, "bDestroy": True, "bFilter": True, "bPaginate": False, "sScrollY": "600px", "bSort": True)))

Data, Filter, Destroy, Paginate etc. are all options for Datatable...but what's the logic in those lowercase letter you have to put in the B4J code?
Why it is sScroll, aaData, bSort...?