customSearch example

Description

I’m trying to use client side pagination and ajax search in conjunction with the help of customSearch

I’m not an experienced java script developer, so I’m having troubles with understanding the examples in general…

The example should basically inject the data into the table and I can see the expected results, basically in the same format as it was requested by the data-url mechanism, but the table stays empty

Unfortunately, I cannot provide a real example, because its a combination of an internal webservice with twig, sass and symfony with json data from an internal third party api

Help would be much appreciated

Example(s)

Table definition

<table
                    class="table-striped"
                    id="table"
                    data-toggle="table"
                    data-url="{{ url('proxy_ajax_reload') }}"
                    data-custom-search="customSearch"
                    data-search="true"
                    data-search-on-enter-key="true"
                    data-show-search-button="true"
                    data-pagination="true"
                    data-page-list="[10, 25, 50, 100, 200, All]"
                    data-show-refresh="true"
                    data-show-columns="true"
                    data-show-export="true"
                    data-toolbar=".buttons-toolbar"
                    data-filter-control="true"
                    data-show-search-clear-button="true"
                    data-loading-template="loadingTemplate"
                    >
                <thead>
                <tr>
                    <th data-sortable="true" data-field="timestamp" data-filter-control="input">timestamp</th>
                    <th data-sortable="true" data-field="client_ip" data-filter-control="input">client ip</th>
                    <th data-sortable="true" data-field="url" data-filter-control="input">url</th>
                    <th data-sortable="true" data-field="url_port" data-filter-control="select">url port</th>
                    <th data-sortable="true" data-field="status_code" data-filter-control="select">status code</th>
                    <th data-sortable="true" data-field="target_ip" data-filter-control="input">target ip</th>
                    <th data-sortable="true" data-field="block_reason"  data-filter-control="select">block reason</th>
                </tr>
                </thead>
            </table>

Custom search function

function customSearch(data, text) {
        var url = "{{ url('proxy_ajax_reload') }}"

        if ( text ) {
            $.get(url + "?search=" + text, function (result) {
                return result
            });
        }
    }

Result

{
  "timestamp": "2021-11-29T14:06:00.561Z",
  "client_ip": "1.2.3.4",
  "url": "https://vssps.dev.azure.com",
  "url_port": "443",
  "status_code": "200",
  "target_ip": "13.107.42.20",
  "user_agent": "VstsAgentCore-linux-x64/2.195.0 (Linux 5.4.0-1063-azure #66~18.04.1-Ubuntu SMP Thu Oct 21 09:59:28 UTC 2021) VSServices/16.194.31723.0 (NetStandard; Linux 5.4.0-1063-azure #66~18.04.1-Ubuntu SMP Thu Oct 21 09:59:28 UTC 2021)",
  "block_res": "0",
  "block_reason": ""
}

[djhvscf]

Let me prepare an example and I’ll back to you

[UtechtDustin]

I’m closing this issue, because we don’t get any response from you @riskersen. If you still need help, please answer my question and we will reopen the issue.