datatables select extension not working

fiks

i 'm probably missinmg something small here. I create datatables dynamically after preparing table data and columns. see code below (Ive removed a lot of clutter in the code shown below)

class Idt {
    constructor(cols, data){
        this.cols = cols;
        this.data = data;
        this.dt_instance = $('#idt').DataTable({
            select: 'single',
      "columns": this.cols,
      "data": this.data,
      "dom": '<"top"<"pml"><"pmr"B>>>rt <"bottom"lip>',
            "initComplete": (settings, json) => {

        //create the input search boxes at the top of the datatable on a row (tr) below thead.
        //this is done by cloning tr of thead and append it to same thead of the datatable (#ireps_dt)
        $('#idt thead tr').clone(false).appendTo( '#idt thead' );
        $('#idt thead tr:eq(1) th').each( function () {
        let title = idt_columns_map().get($(this).text().trim());
        $(this).html( '<input class="col_search" type="text" placeholder=" '+title+' " />' );
        });

        // Apply the search. this search function actually filters the column for a value in the input box
        let self = this;
        $('#idt thead').on('keyup change', '.col_search', function () {
        self.dt_instance.column( $(this).parent().index() ).search( this.value ).draw();
        });
            },
    });
    }
    set_cols = (idt_columns_map) => {
        let self = this;
        self.dt_instance.columns().every(function(key, value) {
            $(self.dt_instance.column(key).header()).text(idt_columns_map().get($(self.dt_instance.column(key).header()).text().trim()));
        })
        return this;
    }
}

I later instantiate Idt as shown in the code below.

        const trns = new udc.Trns();
        const data = trns.get_trns();
        const cols = trns.get_trns_cols();
        const trns_dt = new uuc.Idt(cols, data).set_cols(uuc.idt_columns_map);  

Problem is: the select extension does not work.

This is what i've done troubleshooting:

1. made sure I included jquery js, datatables js and select js
   
   <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
   <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
2. confirmed from chrome that the files above are loaded from cdn.datatables.net when the browser runs
3. via chrome debugger looked at "initComplete": (settings, json) => {} and interogated "setting._select" and confirmed that select has been intitialised

_select:
selector: "td, th"
items: "row"
style: "single"
blurable: false
toggleable: true
info: true

but still, my datatable will not select a row.

Please help. what did I miss?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

fiks

thanks Collin.

u can find my code at http://live.datatables.net/kesepona/1/

tnx

kthorngren

Thanks for the test case. Took a bit to find but the problem is with your dom option. You have one too many > in "dom": '<"top"<"pml"><"pmr"B>>>rt <"bottom"lip>', after B. It should look like this:

"dom": '<"top"<"pml"><"pmr"B>>rt <"bottom"lip>',

Updated example:
http://live.datatables.net/wecebicu/1/edit

As a bonus you now get all the other features like Buttons, info and paging

Kevin

fiks

tnx Kev, you saved my day. I keep wondering what will be the easier way to locate such mistakes? tnx very much Kev.