javascript - 如何通过 URL 将变量传递给数据表搜索字段？

Question

我目前正在做一个 laravel 5.4 项目，在这个项目中我已经使用 DataTables jQuery 插件 成功地实现了一个数据表。此数据表 (#sample_1) 默认包含一个搜索字段，该字段可以正常工作并根据搜索过滤记录。

数据表位于 /home/loan 我想知道是否有任何方法可以通过将搜索字符串传递到数据表。例如:/home/loan?search=bella

在 chrome 中检查我的数据表 html 代码后，我发现数据表搜索有

<label>Search:
<input type="search" class="form-control input-sm input-small input-inline" placeholder="" aria-controls="sample_1">
</label>

我相信这是包含在数据表插件中的。我找不到为它分配名称/ID 的方法，因此我可以尝试执行 /home/loan?search=bella我认为如果可行，那将是最简单的方法。但这里是 javascript

var initTable1 = function () {

    var table = $('#sample_1');

    // begin first table
    table.dataTable({

        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _END_ out of _TOTAL_ loans",
            "infoEmpty": "No loans found",
            "infoFiltered": "(filtered1 from _MAX_ total loans)",
            "lengthMenu": "Show _MENU_",
            "search": "Search:",
            "zeroRecords": "No matching loans found",
            "paginate": {
                "previous":"Prev",
                "next": "Next",
                "last": "Last",
                "first": "First"
            }
        },


        "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

        "lengthMenu": [
            [11, 20, 30, -1],
            [11, 20, 30, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 11,            
        "pagingType": "bootstrap_full_number",
        "columnDefs": [
            {  // set default column settings
                'orderable': true,
                'targets': [0]
            }, 
            {
                "searchable": false,
                "targets": [0]
            },
            {
                "className": "dt-right", 
                //"targets": [2]
            }
        ],
        "order": [
            [1, "asc"]
        ] // set first column as a default sort by asc
    });

请帮帮我

Answer 1

获取url参数后需要使用initComplete重绘表格。

function getParam()
    {
        return window.location.href.slice(window.location.href.indexOf('?') + 1).split('=')[1];
    }

var table = $('#sample_1');

// begin first table
table.dataTable({

    // Internationalisation. For more info refer to http://datatables.net/manual/i18n
    "language": {
        "aria": {
            "sortAscending": ": activate to sort column ascending",
            "sortDescending": ": activate to sort column descending"
        },
        "emptyTable": "No data available in table",
        "info": "Showing _END_ out of _TOTAL_ loans",
        "infoEmpty": "No loans found",
        "infoFiltered": "(filtered1 from _MAX_ total loans)",
        "lengthMenu": "Show _MENU_",
        "search": "Search:",
        "zeroRecords": "No matching loans found",
        "paginate": {
            "previous":"Prev",
            "next": "Next",
            "last": "Last",
            "first": "First"
        }
    },


    "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

    "lengthMenu": [
        [11, 20, 30, -1],
        [11, 20, 30, "All"] // change per page values here
    ],
    // set the initial value
    "pageLength": 11,            
    "pagingType": "bootstrap_full_number",
    "columnDefs": [
        {  // set default column settings
            'orderable': true,
            'targets': [0]
        }, 
        {
            "searchable": false,
            "targets": [0]
        },
        {
            "className": "dt-right", 
            //"targets": [2]
        }
    ],
    "order": [
        [1, "asc"]
    ], // set first column as a default sort by asc

    "initComplete": function () {
        this.api().search(getParam()).draw();
     });
});