Skip to content

Instantly share code, notes, and snippets.

@moxet
Created September 21, 2021 12:25
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save moxet/7e27a359785c8fcf05d80877115e6a94 to your computer and use it in GitHub Desktop.
Save moxet/7e27a359785c8fcf05d80877115e6a94 to your computer and use it in GitHub Desktop.
Add DataTable features to Crocoblock Table Builder
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.jet-dynamic-table').DataTable();
});
</script>
@wisiagency
Copy link

wisiagency commented Jan 17, 2023

hi may i ask a question? how can i use index column like this?
https://datatables.net/examples/api/counter_columns.html
image
and how to make highlight entries by column?

@moxet
Copy link
Author

moxet commented Mar 6, 2023

@wisiagency use this code

<script> 
jQuery(document).ready(function($) { 
var t = $('.jet-dynamic-table').DataTable({
        columnDefs: [
            {
                searchable: false,
                orderable: false,
                targets: 0,
            },
        ],
        order: [[1, 'asc']],
    });
 
    t.on('order.dt search.dt', function () {
        let i = 1;
 
        t.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
            this.data(i++);
        });
    }).draw();
}); 
</script>

@FernandaWP
Copy link

How do I translate into Portuguese?

@moxet
Copy link
Author

moxet commented Sep 21, 2023

@webiq1759
Copy link

Hello Moxet, please help me, I've that youtube video over and over again, that applies to the above piece of code. the pagination is not working, the filtering is not also working.

I would really be grateful for your assistance.

@webiq1759
Copy link

Thank you for your assistance. Issue resolved.

@alexgauvin
Copy link

Hi, thanks for this. Really helpful.

I'm using JetEngine Tables builder to display CPT repeater fields data. Seems that I can't automatically order columns.
Is it possible to force a column in a specific order with these snippets ? I did try with Default ordering (sorting) but can't make this work. Thanks

@moxet
Copy link
Author

moxet commented Feb 23, 2024

@alexgauvin i guess i replied in youtube, you need to pass flat/raw data to datatable instead of template.

@alexgauvin
Copy link

@moxet Thanks, I wasn't sure you would respond on YT. Everything's working as expected.

@Jonathan1500
Copy link

Thank you for your assistance. Issue resolved.

Hello, whats Is the Solution?

@alexgauvin
Copy link

@Jonathan1500 Here's my snippet, if it can help :

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

<script> 
jQuery(document).ready(function($) { 
    $('.jet-dynamic-table').DataTable( {
		order: [[0, 'desc']],
		info: false,
		paging: false,
		searching: false
	});
});    
</script>

With it, you can display or not some elements on the table.
And, with the order param, you can point which column will be automatically filtered and in what order.

@Jonathan1500
Copy link

@Jonathan1500 Here's my snippet, if it can help :

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

<script> 
jQuery(document).ready(function($) { 
    $('.jet-dynamic-table').DataTable( {
		order: [[0, 'desc']],
		info: false,
		paging: false,
		searching: false
	});
});    
</script>

With it, you can display or not some elements on the table. And, with the order param, you can point which column will be automatically filtered and in what order.

You table Is with crocoblock?

@alexgauvin
Copy link

Data is created with JetEngin CPT, with a custom repeater field.
Data is then displayed with Tables builder provided by JetEngine as an addon plugin.
But I wasn't able to filter repeater data. With @moxet's tutorials i'm good to go.

@Jonathan1500
Copy link

Data is created with JetEngin CPT, with a custom repeater field. Data is then displayed with Tables builder provided by JetEngine as an addon plugin. But I wasn't able to filter repeater data. With @moxet's tutorials i'm good to go.

I use the same jetengine and table builder, but I have a problem that only shows me 10 post

@gurutto-manila
Copy link

Data is created with JetEngin CPT, with a custom repeater field. Data is then displayed with Tables builder provided by JetEngine as an addon plugin. But I wasn't able to filter repeater data. With @moxet's tutorials i'm good to go.

I use the same jetengine and table builder, but I have a problem that only shows me 10 post

check your query if you put offset that limiting to 10

@Jonathan1500
Copy link

Jonathan1500 commented Apr 1, 2024

Hello, i dont have limit in my query

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment