3

我用过gem 'jquery-datatables-rails' .

我们将它用于服务器端响应。我们将 railscast #340 用于数据表。

将数据表初始化为

jQuery ->
  $('#products').dataTable
    sPaginationType: "full_numbers"
    bJQueryUI: true
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#products').data('source')

它与列表工作正常。

我们为表格提供了自定义搜索功能。我们不使用数据表中的搜索方法。

我们正在发布数据以使用新方法进行搜索并尝试重新绘制表格。但它什么也没做。

我们如何在 中显示结果datatable？

任何帮助表示赞赏。

谢谢

编辑

我们有一个列表页面，其中添加了普通数据表以列出服务器端响应。

像这样在数据表上放置一个搜索表单

搜索表格

<form action="search_path" method="post" id="search_token_form" data-remote="true">
<input type="textbox"  name="name"/>
<select name="type">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 
<input type="textbox" name="date">
<input type="submit">
</form>

数据表

<table id="products">
<thead>
 <tr>
  <th>Name</th>
  <th>Type</th>
  <th>Date</th>
 </tr>
</thead>

<tbody></tbody>
</table>

我们将搜索表单发布到 rails 中的另一个操作并收集结果数据。

我们如何替换从列出数据表中的操作中找到的数据？

javascript

$(document).on("submit", "#search_token_form", function(e){

        e.preventDefault();
        var key1 = $("#_email_or_name").val();
        var key2 = $("#_token_type").val();
        var key3 = $("#_look_up_token").val();
        var key4 = $("#_check_date").val();
        var key5 = $("#_date_range").val();
        var key6 = $("#_check_date_range").val();
        var key7 = $("#_from_date").val();
        var key8 = $("#_to_date").val();

        var data_params = {
            "sEcho": 1,
                "email_or_name": key1,
                "token_type": key2,
                "look_up_token": key3,
                "check_date": key4,
                "date_range": key5,
                "check_date_range": key6,
                "from_date": key7,
                "to_date": key8,
                "format": "json"

        }

        $("#search_params").val(data_params);

        $.ajax({
            url: '/tokens/search_token_result',
            method: 'post',
            dataType: 'JSON',
            async: false,
            data:data_params,
            success: function (data){
                table.fnClearTable();
                table.fnAddData(data.aaData);
                table.fnDraw();

//                for(i=0; i < data.aaData.length; i++){
//                    new_table.fnUpdate( data.aaData[i], i );
//                }
////                return false;

            },
            failure: function (msg) {
                console.log("Error in sending the data");
            }
        });

这是我们执行 ajax 调用以推送输入值并获取结果的脚本。

但问题是在更新记录之后。它像以前一样重新初始化数据表。这意味着数据表会丢失我们的搜索结果。

我该如何解决这个问题？

4

0 回答 0