Question

在document.ready上，我的Datatable相应加载。

我需要做的是构建一个功能，在用户进行搜索时重新加载Datatable。

所以Datatable加载如下：

library(XLConnect) 
library(RDCOMClient) 

xlApp   <- COMCreate("Excel.Application")
xlWbk   <- xlApp$Workbooks()$Open(FILEPATH+FILENAME.XLSX)
xlWb    <- loadWorkbook(FILEPATH+FILENAME.XLSX)
wbnames <- as.vector(getSheets(xlWb))

# Copy a column from the existing data frame and paste it to the first
# sheet of the FILENAME.XLSX, starting at Row#6, no headers and no rownames:
writeWorksheet(xlWb, as.data.frame(Shipments$SHIPMENT_ID),
    sheet = wbnames[1], startRow = 6, header = F, rownames = NULL)

正如您将在上面的代码中看到的那样，当文档准备就绪时，如果用户没有进行搜索，我会加载来自名为'displayQnams.php'的进程中的所有数据。

但是如果用户进行搜索，则参数将被发送到另一个名为“qnamsSearch.php”的进程。

如何使用'qnamsSearch.php'的搜索结果重新加载数据表？

我尝试在帖子中创建一个变量：

$(document).ready(function() 
{
  $('#searchSubmit').on('click', function()  // used for searching
  {
    var searchbooking = $('#searchbooking').val();
    var searchquote = $('#searchquote').val();
    var searchtli = $('#searchtli').val();

    if(searchbooking == "" && searchquote == "" && searchtli == "")
    {
      $('.message').text('You did not enter any search criteria.');
      return false; // making sure they enter something
    }
    else
    {
      $.post('api/searchAll.php', {searchbooking:searchbooking, searchquote:searchquote, searchtli:searchtli}, function(data)
      {
        // what do i do here???
        // how do I get the return results to load
      });
    }
  });
  // if the user does not enter any search parameters, load everything
  $('#example1').DataTable({    
    "ajax": {
      "url": "api/displayQnams.php",
      "type": "POST",
      "dataSrc": ''
    },
    "columns": [
      { "data": "" },
      { "data": "column1" },
      { "data": "column2" },
      { "data": "column3" }
    ],
    "iDisplayLength": 25,
    "order": [[ 6, "desc" ]],
    // and so on
  });
});

我试图在ajax调用中调用该变量：

var dataUrl = data;

但是Datatable不会显示任何内容，也没有控制台错误。

我该如何做到这一点？

Answer 1

您可以尝试使用此功能。

用户点击搜索按钮后，下面是流程：

清除数据表 - datatables clear()
向表格添加新数据 - datatables rows.add()
调整列大小（可选） - datatables adjust.columns()

使用新数据重新绘制数据表 - datatables draw()

$(document).ready(function(){
    var datatable = $('#example1').DataTable({    
        "ajax": {
            "url": "api/displayQnams.php",
            "type": "POST",
            "dataSrc": ''
        },
        "columns": [
            { "data": "" },
            { "data": "column1" },
            { "data": "column2" },
            { "data": "column3" }
        ],
        "iDisplayLength": 25,
        "order": [[ 6, "desc" ]]
    });

    $('#searchSubmit').on('click', function(){
        var searchbooking = $('#searchbooking').val();
        var searchquote = $('#searchquote').val();
        var searchtli = $('#searchtli').val();

        if(searchbooking == "" && searchquote == "" && searchtli == ""){
            $('.message').text('You did not enter any search criteria.');
            return false; // making sure they enter something
        } else {
            $.post(
                'api/searchAll.php',
                { searchbooking:searchbooking, searchquote:searchquote, searchtli:searchtli },
                function(data) {
                    var newData = data;
                    datatable.clear().draw();
                    datatable.rows.add(newData); // Add new data
                    datatable.columns.adjust().draw(); // Redraw the DataTable
                });
            }
        });
 });

jQuery Datatables填充搜索数据

1 个答案: