javascript - 数据表按钮根据发送的变量更改/过滤内容

Question

我正在使用带有按钮插件的数据表。我有两个按钮，它们根据需要发送到服务器的变量来过滤显示的内容，因此每次单击一个按钮时，ajax url 都必须更改。

$('#example').DataTable( {
    processing: true,
    lengthChange: false,
    dom: 'Bfrtip',
    ajax: {
        url: '/get?op=10',
        dataSrc: ''
    },
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'surname' },
        { data: 'phone' },
        { data: 'email' },
        { data: 'nin' }
    ],
    buttons: [
        {
            text: 'Everyone',
            // action ??
        },
        {
            text: 'Owners',
        },
        {
            text: 'Applicants',
        }
    ],
    select: true
});

第三个按钮应将 ajax url 重置为原始 URL。

public function get_address_book_table($id, $owner = 0) {
    $mysqli = $this->aet->getAetSql();
    $mysqli->set_charset('utf8');

    switch ($owner) {
        case 0: $a = $b = NULL; break;
        case 1: $a = 'pd.applicant_id'; $b = 'INNER JOIN property_demand pd ON pd.applicant_id = ab.id'; break;
        case 2: $a = 'po.owner_id';     $b = 'INNER JOIN property_owner po ON po.owner_id = ab.id'; break;
    }

    $query = 'SELECT ab.*, sab.*' . $a . '
              FROM address_book ab
              INNER JOIN staff_address_book sab ON sab.contact_id = ab.id' .
              $b . '
              WHERE sab.staff_id = ?';

    if ($stmt = $mysqli->prepare($query)) {
        $stmt->bind_param('s', $id);
        $stmt->execute();

        $stmt->bind_result($id, $name, $surname, $phone, $email, $nin, $note, $a, $b);

        $data = [];
        while ($stmt->fetch()) {
            $nestedData = [];
            $nestedData['id'] = $id;
            $nestedData['name'] = $name;
            $nestedData['surname'] = $surname;
            $nestedData['phone'] = $phone;
            $nestedData['email'] = $email;
            $nestedData['nin'] = $nin;
            $data[] = $nestedData;
        }
    }

    return $data;
}

获取文件:

// address_book table
if ($op === 10) {

    $owner = isset( $_GET['owner'] ) ? (int) $_GET['owner'] : 0;
    $result = $functions->get_address_book_table($staff->getId(), $owner);

    header('Content-type: text/json');
    header('Content-type: application/json');
    echo json_encode($result);
}

我正在寻找按钮插件的选项，该选项允许我在单击时更改 ajax url，以便使用新的服务器内容刷新表格。

Answer 1

您需要在按钮事件中设置一个值，并将该值作为参数传递给服务器。最后，您可能希望在单击按钮时触发 ajax 数据重新加载。尝试这样的事情:

var filterType = 'all';
$('#example').DataTable( {
    processing: true,
    lengthChange: false,
    dom: 'Bfrtip',
     serverSide: true,
    ajax: {
        url: '/get',
        //dataSrc: 'data',
          data: function(d) {
            d.op = 10;
            d.filterType = filterType;
          }
    },
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'surname' },
        { data: 'phone' },
        { data: 'email' },
        { data: 'nin' }
    ],
    buttons: [
        {
            text: 'Everyone',
            action: function(e, dt) { filterType = 'all'; dt.ajax.reload(); }
        },
        {
            text: 'Owners',
            action: function(e, dt) { filterType = 'owner'; dt.ajax.reload(); }
        },
        {
            text: 'Applicants',
            action: function(e, dt) { filterType = 'app'; dt.ajax.reload(); }
        }
    ],
    select: true
});