具有自定义搜索的服务器端响应的数据表

时间:2014-06-11 05:40:49

标签: jquery ruby-on-rails ruby-on-rails-4 jquery-datatables jquery-datatables-rails

我使用了gem 'jquery-datatables-rails' .

我们正在将它用于服务器端响应。我们使用railscast#340作为数据表。

将数据表初始化为

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

该列表正常运行。

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

我们发布数据以使用新方法进行搜索并尝试重绘表格。但它没有做任何事情。

我们如何在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调用以推送输入值和获取结果的脚本。

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

我该如何解决这个问题?

0 个答案:

没有答案