Filtered Data

farr433

I use datatables.net for my data tables. It has a bar where I can filter the data and the data table records change on the fly. I also use Google visualizations for charts. I am trying to get the data from the table and then apply it to the chart. So when the data table changes the chart changes also, bind them I guess.

I have the data tables properly doing ajax request to get all the records. Then from there when the data is filtered it renders the table with the filtered data all on the client side. I realize I could just send another ajax request with the filter parameters but I would prefer to keep all of the processing on the client side after having all of the records. I am using the "fnDrawCallback" function but should I be using a bind method instead or what is the best approach? I'll supply my code so sorry if it long but at least it is an example of using ajax to get records. I feel like I am very close and when I check the console log I am getting only the filtered record but now how do I extract just the data without all of the extra object data?

HTML

```html

<div class="tab-pane fade" id="messages-pills">
    <div class="col-lg-12">
        <div class="panel panel-danger">
        <span class="pull-right"> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#insertBillTemplateModal">Create Bill Template</button> </span>
        <span class="pull-right"> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#insertBillPaymentModal">Insert Template Payment</button> </span>
            <div class="panel-heading">
                Monthly Bills
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" id="payments">
                        <thead>
                        <tr>
                            <th>Description</th>
                            <th>Vendor</th>
                            <th>Location</th>
                            <th>Amount</th>
                            <th>Confirmation</th>
                            <th>Date</th>
                            <th>Next Due Date</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

'''

Javascript

```js

    $(document).ready(function () {
    var x = 0;
        var payTable = $('#payments').DataTable({
        "fnDrawCallback": function()
        {
                          //fnDrawCallback runs before the ajax is processed so skip the first callback
                          if (x > 0)
                          {
                          var table = new $.fn.dataTable.Api( '#payments' );
                          // Get data from the first row
                          var data = table.column(0).data(); // same as row(0).data()
                           var data3 = table.$('tr', {"filter": "applied"});
                           console.log(data3);
                          }
                          x = x + 1;
        },
            "ajax": {
                "url": "{{ URL::Route('getAllAccountingPayments') }}",
                "type": "POST"
            },
            "columns": [
                { "data": "description" },
                { "data": "vendor" },
                { "data": "location" },
                { "data": "amount" },
                { "data": "confirmation" },
                { "data": "date" },
                { "data": "next_date" }
            ]
        });
    });

'''

PHP with Laravel Framework

```php

public function getAllPayments()
{
    $dataTableArray = array();
    $payments = AccountingBillPayment::all();
    //Construct Data Table
    if ( empty($payments[0]))
    {
        $dataTableArray['data'][] = array(
            'vendor' => 'none',
            'location' => 'none',
            'amount' => 'none',
            'confirmation' => 'none',
            'date' => 'none',
            'next_date' => 'none'
        );
    }
    else
    {
        foreach ($payments as $payment) {
            $template = AccountingTemplateBill::find($payment->template_id);
            $updateInfo = AccountingMonthlyUpdate::find($payment->update_id);
            $datePaid = strtotime($payment->date_paid);
            $nextMonth = date("m", strtotime("+1 month", $datePaid));
            $nextYear = date("Y", strtotime("+1 month", $datePaid));
            $nextPayment = date('m/d/Y', strtotime($nextMonth.'/'.$updateInfo->day_due.'/'.$nextYear));

            $dataTableArray['data'][] = array(
                'description' => $template->description,
                'vendor' => ResourceVendorDef::find($template->vendor_id)->description,
                'location' => SettingsLocationDef::find($template->location_id)->name,
                'amount' => $payment->amount_paid,
                'confirmation' => $payment->confirmation,
                'date' => date('m/d/Y', strtotime($payment->date_paid)),
                'next_date' => $nextPayment
            );
        }
    }
    return json_encode($dataTableArray);
}

'''