Bootstrap table server side filtering not working (data-filter-control="select")

Question

Form this link :

Bootstrap table filtering not working

My Code :

<table 
    data-url="<?php echo Yii::app()->createUrl('sj/getdata_list'); ?>" 
    data-pagination="true"
    id="tables" 
    class="table table-striped table-hover  " 
    data-toggle="table"
    data-side-pagination="server"
    data-page-list="[5, 10, 20, 50, 100, 200]"
    data-search="true"

    data-show-pagination-switch="showPaginationSwitch" 
    data-filters="true" 

    data-filter-control="true"
    data-sort-order="desc" 
    data-selectable-rows="true" 
    data-item-id="id" 
    data-show-columns="true" 
    data-selectable-rows-action="load_panels" 
    data-minimum-count-columns="1" 
    data-show-refresh="true" 
    data-search-align="left" 
    data-toolbar="#Customer-custom-toolbar" 
    data-show-filter="true" 
    data-striped="true" 
    data-sort-name="id" 
    data-show-toggle="true" 
    data-detail-view="true"
    data-detail-formatter="detailFormatter"

    data-id-field="no_sj"
    data-editable-emptytext="-"
    data-editable-url="<?php echo Yii::app()->createUrl('sj/edit_sj');?>"

    data-filter-control="true"
>
    <caption style="border: inherit; background-color: lightgrey;">
        <span class="align-left"><strong>Tabel Pembelian yang belum diterima</strong></span>
    </caption>

    <thead>
        <tr>
            <th data-field="no_sj" data-sortable="true" data-filter-control="input">No Surat Jalan</th>
            <th data-field="tgl_sj" data-sortable="true" data-filter-control="select">Tgl Surat Jalan</th>
            <th data-field="cabang" data-sortable="true" data-filter-control="input">Cabang</th>
            <th data-field="qnty" data-sortable="true">Quantity</th>
            <th data-field="harga" data-sortable="true" class="hidden">Harga</th>
            <th data-field="jt" data-sortable="true">JT</th>
            <th data-field="stat_terima" data-sortable="true" data-filter-control="select" class='set_edit_status' data-editable-title='Status :' data-pk='no_sj' data-editable="true">Status</th>
            <th data-field="tgl_terima" data-sortable="true" data-filter-control="datepicker" class='set_edit_tanggal' data-editable-type="date" data-editable-viewformat='dd-mm-yyyy' data-editable-clear='false' data-editable-format='dd-mm-yyyy' data-editable-datepicker='{weekStart:1}' data-pk='no_sj' data-editable="true" >Tanggal</th>
            <th data-field="ket_terima" data-sortable="true" class="hidden">Ket</th>
        </tr>
    </thead>
</table>

The result in the filter "select" didn't works. it's only show select the page that show, if in next/previous page the filter select didn't appear in the option select filter.

Anything else i miss ?

Answer 1

I had the same issue and came up with a hackey solution by editing the bootstrap-table-filter js file and renaming it to use as a one off on my page.

I un-commented line 65:

    selectControl = $(selectControl.get(0));

Replaced this (starting at line 208?):

   if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') {
       var filterDataType = column.filterData.substring(0, 3);
       var filterDataSource = column.filterData.substring(4, column.filterData.length);

       var selectControl = $('.' + column.field);
       addOptionToSelectControl(selectControl, '', '');

       switch (filterDataType) {

       case 'url':
            $.ajax({
            url: filterDataSource,
            dataType: 'json',
            success: function (data) {
                $.each(data, function (key, value) {
                    addOptionToSelectControl(selectControl, key, value);
                });
            }
        });

With this:

    if (column.filterControl && column.searchable) {

        var filterDataType = 'url';
        var filterDataSource = 'fema_filter_data.php?column='+column.field;
        var selectControl = $('.' + column.field);
        switch (filterDataType) {

        case 'url':
            $.ajax({
                url: filterDataSource,
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (key, value) {
                        if(column.field === 'team'){
                            addOptionToSelectControl(selectControl,value.team, value.team);
                        }
                    if(column.field === 'city'){
                        addOptionToSelectControl(selectControl,value.city, value.city);
                    }
                    if(column.field === 'st_name'){
                        addOptionToSelectControl(selectControl,value.st_name, value.st_name);
                    }
                    if(column.field === 'residence'){
                        addOptionToSelectControl(selectControl,value.residence, value.residence);
                    }
                    if(column.field === 'type_abbr'){
                        addOptionToSelectControl(selectControl,value.type_abbr, value.type_abbr);
                    }
                    if(column.field === 'own_rent'){
                        addOptionToSelectControl(selectControl,value.own_rent, value.own_rent);
                    }
                    if(column.field === 'cat'){
                        addOptionToSelectControl(selectControl,value.cat, value.cat);
                    }
                });
            }
        });
        break;

where the conditionals inside the .each are the columns I want to filter. Then I had to comment out this entire block (starting at around 400?):

if ((!column.checkbox) || (!column.radio)) {
                if (column.filterControl !== undefined && column.filterControl.toLowerCase() === 'select' && column.searchable) {
                    if (column.filterData === undefined || column.filterData.toLowerCase() === 'column') {
                        var selectControl = $('.' + column.field);
                        if (selectControl !== undefined && selectControl.length > 0) {
                            if (selectControl.get(0).options.length === 0) {
                                //Added the default option
                                addOptionToSelectControl(selectControl, '', '');
                            }

                            //Added a new value
                            addOptionToSelectControl(selectControl, value, value);
                        }
                    }
                }
            }

because it was overwriting my values. fema_filter_data.php is a page specifically set up to pull the filter values and return the json:

    if($_GET['column'] == 'st_name'){
        $sql = "select trim(st_name) as st_name FROM v_idam_damaged_parcels dp
        WHERE (".$damage_type." > 0 OR boot_type = 'IA') 
        AND dp.event_id = '".$_SESSION['event_id']."' 
        AND num_buildings > 0 
        group by st_name order by st_name";
    }
    if($_GET['column'] == 'team'){
$sql = "select trim(t.team_name) as team FROM v_idam_damaged_parcels dp
RIGHT JOIN parcel AS ps ON dp.parcel = ps.qpid
LEFT JOIN event_team_region  AS etr ON st_intersects(etr.the_geom,ps.the_geom) AND etr.event_id = ". $_SESSION['event_id']."
LEFT JOIN teams t on t.team_id = etr.team_id
WHERE (".$damage_type." > 0 OR boot_type = 'IA') 
AND dp.event_id = '".$_SESSION['event_id']."' 
AND num_buildings > 0 
group by t.team_name order by t.team_name";

} etc...

Then:

    array_unshift($result,''); // first record showing in filter should be blank
    echo json_encode($result);