Question

我有一个通过ajax调用填充的dynatable。一切都很好。据我所知，在ajax模式下，所有内容都会传回服务器进行处理，并且我已经进行了列排序工作。现在我希望实现基于列的过滤。

例如，表格：

   <table id="grid">
      <thead>
        <tr>
          <th>Name</th>
          <th>function</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

我希望能够提交名称=＆＃34; foo＆＃34;并且仅匹配名称为＆＃34; foo＆＃34;的行或搜索＆＃34; foo＆＃34;的功能并且只匹配该列中匹配的行。

到目前为止我的JS：

jQuery(document).ready(
  function() {
    var url = '/bar/data';
    $('#grid').dynatable({
        dataset: {
            ajax: true,
            ajaxUrl: url,
            ajaxOnLoad: true,
            records: []
        }
    });
  }
);

我愿意（尽管我不知道如何）在必要时在每个列标题下设置输入框。另一个想法是选择元素，其中包含您要搜索的列名称。我已经做了这个测试，但现在问题变成了如何让dynatable.js将url参数设置为queries[Name]=foo而不仅仅是queries[search]=foo。我已经重新阅读了文档并查看了过滤示例，但我还没有看到如何解决这个问题。（我希望避免输入用户搜索字符串，如＆＃34;名称：foo＆＃34;在默认搜索输入框中）

任何想法或指示都将不胜感激......

Answer 1

经过一些反向改造后，我找到了ajax数据

  $("#my-table").dynatable({
  dataset: {
     ajax: true,
     ajaxUrl: "/getFromServer",
     ajaxOnLoad: true,
     ajaxData:    {
                     caller:    myName,
                     debug:     2,
                     county:        countyName
                  },
     records: []
  }

}）;

ajax数据块中的所有内容都传递给服务器。可能有帮助。

沃尔特

Answer 2

赞成的回答很好，但我认为更好，更有动态的＃34;这样做的方法是在事件触发器内。

 window.addEventListener('load', function() {

    var dynaTable = $("#dynatable-table");
    //you can call your function within the "function (e,data)" 
    // or replace it
    dynaTable.bind('dynatable:beforeProcess', function (e, data) {
        console.log("beforeProcess fired",data);
        var dynaTableData = dynaTable.data('dynatable');
        if(!dynaTableData){
            ; //not yet loaded
        }else{
            //add aditional ajax params here
            dynaTableData.settings.dataset["ajaxData"] = { "addedDateTime" : new Date()};
        }
    });

    dynaTable.bind('dynatable:afterProcess', function (e, data) {
        //after adding the additional ajax params you should be able to 
        // see them here
        console.log("afterProcess fired",data);
    });

     dynaTable.dynatable({
        dataset:{
            ajax: true,
            ajaxUrl: appRootUrl + "/projects/getSomeRecords",
            ajaxOnLoad: true,
            records: []
        },
        features:{
            pushState : false
        }
    });

有时您可能需要强制Dynatable更新，这可以轻松完成：

  self.forceDynaTableUpdate  = function () {
    var dyna = $('#dynatable-table-sessions').data('dynatable');
    if(!dyna){
        return;
    }
    console.log("dyna setting:",dyna.settings);

    dyna.process(true);
};

使用AJAX JSON在Dynatable Column中搜索

2 个答案: