Possible to have search/filters away from table

next2heaven

I'm wondering if it's possible to have search and filters not that are on the same page but still programmatically connected to the table? (like this: https://www.evernote.com/l/AEhmTUYqoupCAYBN6efAoeavfJpJyl4kx08). If so, how do I go about that?

rf1234

But the filters in your example ARE on the same page! Do you mean you are not using the built in data tables data entry fields for search etc.?

if you mean that I might be able to help you:
A while ago I built something to kind of pre filter a data table on the server side BEFORE it is being sent to the client. (Hadn't discovered server side processing at that time :-)
1. step: saved the search string from the custom built search field into a PHP session variable on the server side.
2. step: used the content of the session variable to set the values in the WHERE clause of the SQL-statement that selects the data for the data table.
That's pretty easy to do I guess.

Here is another example where I used my custom filter on the client side:
1. step: Built a drop down to select date ranges for selection
2. step: Applied that custom filter to my data tables using $.fn.dataTable.ext.search.push

Return "true" means the row is shown, return "false" means the row is hidden.

$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex, row, counter) {
       var startDate = nMonthsAgo( $('#monthsSelect').val() );
       var lastUpdate = timestampToYearMonthDay ( row.contract.update_time );    
       if (startDate <= lastUpdate) {
           return true;
        } else {
            return false;
        }
    }
);

the two functions I call for completeness

function nMonthsAgo(nMonths) {
    var nDays;
    var duration;
    if (nMonths < 1 && nMonths > 0) {
        //get days in current month and determine how many days back
        //for a fraction of the current month
        nDays = moment(year + '-' + month, "YYYY-MM").daysInMonth();
        nDays = nDays * nMonths;
        duration = moment.duration({'days' : nDays});
    } else {
        duration = moment.duration({'months' : nMonths});
    }
    //return the date n months ago
    return moment(currentTime).subtract(duration).format('YYYY-MM-DD');
}

function timestampToYearMonthDay(timestamp) {
    //returns YYYY-MM-DD
    var date = timestamp.substring(0, 10);
    
    if ( ( date.substring(4, 5) === '-' ) && 
         ( date.substring(7, 8) === '-' )     ) {
    //the field is already in the right format because it was taken from a timestamp
        return date;
    } else {
    //the field needs to be converted because it is in the respecive locales format
        return moment(date, 'L').format('YYYY-MM-DD');
    }
}

The rather basic HTML

<!--select how many months to show-->
<div id="monthsSelectHeader" class="row headers">
    <div class="form-group">
        <div class="col-md-2">                                       
            <select class="selectpicker form-control" id="monthsSelect">
                <option data-icon="fa fa-calendar" title="0.5 Month" value="0.5">Show half a Month</option>
                <option data-icon="fa fa-calendar" title="1 Month" value="1" selected="selected">Show 1 Month</option>
                <option data-icon="fa fa-calendar" title="2 Months" value="2">Show 2 Months</option>
                <option data-icon="fa fa-calendar" title="3 Months" value="3">Show 3 Months</option>
                <option data-icon="fa fa-calendar" title="4 Months" value="4">Show 4 Months</option>
                <option data-icon="fa fa-calendar" title="5 Months" value="5">Show 5 Months</option>
                <option data-icon="fa fa-calendar" title="6 Months" value="6">Show 6 Months</option>
                <option data-icon="fa fa-calendar" title="8 Months" value="8">Show 8 Months</option>
                <option data-icon="fa fa-calendar" title="10 Months" value="10">Show 10 Months</option>
                <option data-icon="fa fa-calendar" title="12 Months" value="12">Show 12 Months</option>
                <option data-icon="fa fa-calendar" title="18 Months" value="18">Show 18 Months</option>
                <option data-icon="fa fa-list-ul"  title="Show All" value="10000">SHOW ALL</option>
            </select>
        </div>
    </div>
</div>