datatable into bootstrap modal

Giulo

Hi guys,
I would like to manage a address book through a datatable displayed in a bootstrap modal.
In practice, in the main map I click the address book button and I see the list of contacts that can be divided by company. It follows that at the first opening of the modal it shows me only the contacts that are not associated with a company and then recharge datatable to every company selection. At the end of the modal recovery the selected contacts.
I had thought: in initialization load datatable with all the contacts in the database and then reload depending on the company selected by my dropdownlist. But I do not know how I would be. That is, to the onchange event of the awning I would call a javascript method but how can I filter the rows of the datatable through the possible hidden column company?

Sorry for my english

colin

Hi @Giulo ,

You can filter on all columns, hidden or visible, with column().search(). So you could search on there to filter for the companies.

Hope that helps,

Cheers,

Colin

Giulo

Hi @Colin, thx.

But then I must initialized datatable with all database contacts and then filter by company id?

colin

Hi @Giulo ,

That's an API call, so you can call it at anytime, it doesn't have to be initialisation.

Cheers,

Colin

Giulo

Hi @Colin,
this is my datatable init:

$(document).ready(function() {
    $('#rubrica').dataTable( {
        data: dataSet,      
        "scrollY": "400px",     
        columns: [          
            { title: "Idcontatto" },            
            { title: "Idcliente" },     
            { title: "Nominativo" },                    
            { title: "Email" }
        ],
        columnDefs: [{ targets: 0, visible: false},
                     { targets: 1, visible: false},                              
                     { targets: 3, render: function (data, type, row){return '<a href="mailto:' + row[3].trim() + '">' + row[3].trim() + '</a>'}}],                                      
        order: [[ 2, "asc" ]],
        bFilter: false,
        bPaginate: false,       
        language: {
             search:      "Cerca:",
             zeroRecords: "Nessun record trovato",
             info:        "",
             infoEmpty:   "",
             infoFiltered: "(Risultato da _MAX_ elementi totali)",
             select : { rows: ""}
        }
    } );
} );

Company id is second column hidden.

When I select my a company on change I call this function:

function ricaricaRubrica() 
{
  var idcliente = $("#cliente2").chosen().val();
  alert(idcliente);
  var table = $('#rubrica').DataTable();
  table.columns(1).search(idcliente).draw();
}

Datatable not change data. I don't find my error

Giulo

I think that 'columns' for all and for a specific index column then I've try this:

table.column(1).search(idcliente).draw();

not working again!

colin

Hi @Giulo ,

This example here shows it working - searching on a hidden column (only the 13 London offices are listed).

Could you modify that example, or create your own, that demonstrates the problem, please.

Cheers,

Colin

Giulo

Hi @Colin,

My code is same yours but continue to load all data into dataSet:

var dataSet = <?php echo $json_array ?>;
$(document).ready(function() {
    var table = $('#rubrica').DataTable( {
        data: dataSet,              
        columns: [          
            { title: "Idcontatto" },            
            { title: "Idcliente" },     
            { title: "Nominativo" },                    
            { title: "Email" }
        ],
        columnDefs: [{ targets: 0, visible: false},
                     { targets: 1, visible: false},                              
                     { targets: 3, render: function (data, type, row){return '<a href="mailto:' + row[3].trim() + '">' + row[3].trim() + '</a>'}}],                                      
        order: [[ 2, "asc" ]]
    } );
    table.column(1).search('7691').draw();
} );

Giulo

Hi @Colin,
I don't understand but if I eneble pagination work good!

colin

That does sound odd - a live example would really help to understand this.

C

Giulo

I've try and the problem was option "bFilter: false"