2

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

例如，对于表：

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

我希望能够提交对 Name = "foo" 的搜索，并且只匹配名称为 "foo" 的行，或者搜索 "foo" 的函数，并且只匹配在该列中匹配的行。

到目前为止我的 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. 我重新阅读了文档并查看了过滤示例，但我没有看到如何解决这个问题。（我想避免在默认搜索输入框中输入用户搜索字符串，如“名称：foo”）

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

4

2 回答 2

3

经过一些逆向工程后，我发现了 ajaxData

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

});

ajaxData-Block 中的所有内容都传递给服务器。可能会有帮助。

沃尔特

于 2014-05-17T19:38:41.533 回答
0

赞成的答案很好，但我认为更好、更“动态”的方法是在事件触发器中。

 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);
};
于 2018-03-04T01:40:48.800 回答