【问题标题】:datatables button change/filter content based on variable sent数据表按钮根据发送的变量更改/过滤内容
【发布时间】:2016-03-26 18:41:21
【问题描述】:

我正在使用带有按钮插件的数据表。我有两个按钮,它们根据需要发送到服务器的变量过滤显示的内容,因此每次单击一个按钮时,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 重置为原始的。

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,以便使用新的服务器内容刷新表格。

【问题讨论】:

  • 所以您希望有人提供代码?尝试一些东西(如果需要进行研究),然后在您需要帮助时发布,然后我们可以帮助您。
  • 是的,抱歉,我已经完成了研究(我只是忘了提及),但我没有发现任何有用的东西。我一直在阅读文档,但我只找到了一些不起作用的示例:datatables.net/extensions/tabletools/button_optionssAjaxUrl 选项,不确定按钮插件如何工作...
  • "这个参数被 Ajax 按钮的默认 'fnClick' 函数用来定义应该发送 Ajax 请求的位置。" "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sAjaxUrl": "remote.php" } ] } 的一些变体,其中“remote.php”是指向您的get_address_book_table($id, $owner = 0) 的一些 URL,我们不知道您的网站会是什么。
  • 我刚刚添加了 ajax url 指向的位置。

标签: javascript jquery datatables


【解决方案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
});

【讨论】:

  • 关于服务器端,是因为需要发送的变量,但是如果我一次将所有数据发送到datables,让datatables过滤会更好吗?我可以在不添加新列的情况下执行此操作吗?我的意思是在数据库表中,可能是一个隐藏列,以便数据表知道如何过滤?
  • 是的,也许我误解了你想要做什么。在这种情况下,您将不需要dt.ajax.refresh()。相反,您会想要实现您想到的任何类型的过滤器......也许是column filter。像这样的东西:dt.column(0).search('1').draw()
  • 我会尝试两种方式。谢谢!
猜你喜欢
  • 2019-10-05
  • 2021-08-08
  • 2013-07-30
  • 1970-01-01
  • 1970-01-01
  • 2020-02-03
  • 2021-04-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多