bootstrap-table-filtre-extension de la commande ne fonctionne pas dans le bootstrap-table

- Je utiliser bootstrap-table et que vous souhaitez utiliser table-filtre-contrôle extension. Dans cette exemple, vous pouvez voir comment utiliser cette extension. Quand je veux utiliser cette extension pour plus de colonnes, il ne fonctionne pas. Dans mon exemple, le filtre ne fonctionne que pour une seule colonne.

jsfiddle

html

<table ref="mainTable" class="table table-striped table-bordered table-hover" 
       cellSpacing="0" id="mainTable" data-show-toggle="true" 
       data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="Customer Name" data-sortable="true" data-filter-control="select">Customer Name</th>
            <th data-field="Location Type" data-sortable="true">Location Type</th>
            <th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Main</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Other</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Main</td>
            <td>Slough SL1 4DX</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Other</td>
            <td>London W1B 5HQ</td>
        </tr>
    </tbody>
</table>

OriginalL'auteur Matt | 2015-09-10

  1. 3

    données déposées ne devrait pas avoir d'espaces, essayez de changer de 

    data-field="Customer Name"

    à

    data-field="CustomerName"

    J'ai mis à jour votre jsfiddle et le filtre de contrôle des travaux.

    http://jsfiddle.net/5h595r6g/9/

    Cependant il serait bien de mettre en œuvre les options du filtre de mise à jour de valeurs disponibles, comme je l'ai décrit dans ce post:

    bootstrap filtre de tableau de contrôle - comment annuler les valeurs inutiles à partir de sélectionner les options

    OriginalL'auteur aattd

  2. 2

    J'ai effectivement mis select2 boîtes de dans les en-têtes, puis utilisé les paramètres de la fonctionnalité pour passer le code du serveur. J'ai fait beaucoup mieux de la solution. Mon code n'est pas avec moi, mais si vous êtes intéressés, je peux passer d'un échantillon ainsi que du lundi.

    Édité pour ajouter exemple.

    Tableau De Base

            <table id='90day'  class='table table-striped' data-filter-control='true'>
            <thead>
                <tr>
                    <th></th>
                    <th><select id='findfield' class='form-control gosearch'><option></option></select></th>
                    <th><select id='findwellname' class='form-control gosearch'><option></option></select></th>
                </tr>
            </thead>
        </table>

    Initialiser le select2 

            $('#90day').on('post-header.bs.table', function () {
$('#findfield').select2({
width: '100%',
placeholder: 'Field',
allowClear: true,
SingleSelection: true,
ajax: {
url: 'selectfield90day.php?active=y',
dataType: 'json',
//delay: 250,
data: function (params) {
$('#findfield').empty();
var d = new Date();
var n = d.getTime();
return {
q: params.term,
n: n
};
},
processResults: function (data) {
return { results: data };
}
}
}); 
$('#findwellname').select2({
width: '100%',
placeholder: 'Name',
allowClear: true,
ajax: {
url: 'selectwellname90day.php?active=y',
dataType: 'json',
delay: 250,
data: function (params) {
$('#findwellname').empty();
var d = new Date();
var n = d.getTime();
return {
q: params.term,
field: $('#findfield').text(),
pad: $('#findpad').text(),
n: n
};
},
processResults: function (data) {
return {
results: data
};
}
}
});
//refresh on any select2 change
$('.gosearch').on('select2:close', function(){
$('#90day').bootstrapTable('refresh');
}); 
});

    Enfin initialisation de la table des

    $('#90day').bootstrapTable({
url: ...,
columns:[
...
],
queryParams: function(params){
params['field']=$('#findfield').text();
params['well_name']=$('#findwellname').text();      
return params;
}
});
    Merci, si vous pouvez me passer l'échantillon, il serait génial 🙂
    édité commentaire d'origine avec des exemples de code ajouté. p.s. mon exemple a bootstrap style contrôles de formulaire ajoutée avec class='form-control'. Photo du résultat final peut être vu ici. (évidemment, à seulement 2 choisir 2 boîtes ajouté dans l'exemple de code). s24.photobucket.com/user/solowookie1791/media/...
    Je vous remercie pour votre extrait de code. Très utile. Je garde ce fil ouvert, juste au cas où quelqu'un s'affiche avec une autre solution.
    Vous êtes les bienvenus. J'ai pris un peu pour obtenir tout cela fonctionné, mais il fonctionne très bien à partir d'une convivialité point. Les utilisateurs finaux de l'amour.

    OriginalL'auteur Jeff B.