如何 post 数据到具有 jquery 的 <a> 元素的 href

Question

我在运行的报告网站上使用 DataTables 来格式化我的表格。我正在使用初始化将 hyperlink 添加到我的表的第一列。有没有办法让它像按钮而不是 hyperlink？

我需要这个，因为我有 hyperlink 发送整行作为 link 的一部分（所以通过 GET），但由于字符数限制它失败了在 GET。我需要使用 POST 才能发送更大的数据量。

hyperlink的定义是：

data = '<a href="FormToEdit.php?everything=\'' + encodeURIComponent(row) + '\'">' + data + '</a>';

这是完整的数据表初始化，用于在上下文中显示 hyperlink：

$.fn.dataTable.ext.buttons.export =
{
    className: 'buttons-alert',
    "text": "Export All Test",
    action: function (e, dt, node, config)
    {
        alert('Export All Test');
    }
};

$(document).ready(function ()
{
    // Setup - add a text input to each footer cell
    $('#DataTableEdit tfoot th').each(function ()
    {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    var table = $('#DataTableEdit').DataTable({
        "lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
        "dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
        "buttons": [{
            extend: 'collection',
            text: 'Selection',
            buttons: ['selectAll', 'selectNone']
        }, {
            extend: 'collection',
            text: 'Export',
            buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
                text: 'Export Current Page',
                exportOptions: {
                    modifier: {
                        page: 'current'
                    }
                },
                customize: function (xlsx)
                {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    $('row:first c', sheet).attr('s', '7');
                }
            },

            {
                text: 'Export All to Excel',
                action: function (e, dt, button, config)
                {
                    dt.one('preXhr', function (e, s, data)
                    {
                        data.length = -1;
                    }).one('draw', function (e, settings, json, xhr)
                    {
                        var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                        var addOptions = { exportOptions: { 'columns': ':all'} };

                        $.extend(true, excelButtonConfig, addOptions);
                        excelButtonConfig.action(e, dt, button, excelButtonConfig);
                    }).draw();
                }
            }]
        }
        ],
        "fixedHeader": {
            header: true,
            footer: true
        },
        "select": true,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "./ServerSide.php",
            "type": "POST"
        },
//This is the part that adds the hyperlink
        columnDefs: [
        {
            targets: 0,
            render: function (data, type, row, meta)
            {
                if (type === 'display')
                {
                    data = '<a href="FormToEdit.php?everything=\'' + encodeURIComponent(row) + '\'">' + data + '</a>';
                }
                return data;
            }
        }],
//End of hyperlink creation
        initComplete: function ()
        {
            var api = this.api();

            // Apply the search
            api.columns().every(function ()
            {
                var that = this;

                $('input', this.footer()).on('keyup change', function ()
                {
                    if (that.search() !== this.value)
                    {
                        that
                          .search(this.value)
                          .draw();
                    }
                });
            });
        }
    });
});

如果我没有足够的信息让我知道，我会添加更多。

Answer 1

您可以尝试将其包含在 <form> 标记中，这样它就会以 post

的形式提交

if (type == 'display'){

    data = '<form action="FormToEdit.php" method="post"><button type="submit" 
           class="btn-as-link" value = \'' +
           encodeURIComponent(row) + '\'>' + data + '</button></form>' ;  
}

你可以让它看起来像 link:

.btn-as-link{
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

如何 post 数据到具有 jquery 的 <a> 元素的 href

How to post data to the href of a <a> element with jquery

php

jquery

datatables-1.10