Page 1 of 1

Is it possible use a library https://datatables.net/?

Posted: Sun Dec 27, 2020 4:54 am
by miasoft
I have use this library in JoomlaComponentBuilder. It's very impressive.
Is any examples or tutorials for nubuilder?
I am new and don't know where I must insert this strings
27.12.png

Re: Is it possible use a library https://datatables.net/?

Posted: Sun Dec 27, 2020 7:26 am
by kev1n
Hi,

Yes, you can use it within nuBuilder. Basically, you

1. Download the library from https://datatables.net/download/ and unpack it into a subfolder. E.g libs/datatables

2. In the (Setup ->) Header, add:

Code: Select all

</script>

<link href="libs/datatables/jquery.dataTables.min.css" rel="stylesheet">
<script src="libs/datatables/jquery.dataTables.min.js"></script>

<script>
3. Place the HTML code of your table in a HTML object.

4. Initialize the Plugin in the form's Custom Code as shown in the examples:

Code: Select all

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

If you have further questions, it might be easier to discuss on discord.


Re: Is it possible use a library https://datatables.net/?

Posted: Wed Jan 06, 2021 10:20 am
by ernesttan1976
Very nice!

Re: Is it possible use a library https://datatables.net/?

Posted: Wed Jan 06, 2021 11:11 am
by kev1n
This was some updated code I posted on Discord:

What still needs to be done is to handle the events, like click on a row, load next page etc..

Code: Select all

if (nuFormType() == 'browse') {
  
    $(document).ready(function() {

        $("DIV[id^='nuBrowse']").hide();
        $("DIV[id^='nucell']").hide();
        $("#nuRECORD").prepend('<table id="browse_dt" class="display" style="width:150%"></table>').css('width', '700px');
        $('#nuActionHolder').hide();
        $('.label').css('position', 'relative');

        $('#browse_dt').DataTable({
            data: nuSERVERRESPONSE.browse_rows,
            columns: nuSERVERRESPONSE.browse_columns
        });

    });
  
}