1

私はこの質問に対する答えを見つけるために高低を検索してきましたが、それを見つけることができませんでした. この質問に対する答えが含まれている、私が検索していないインターネットの隠れたコーナーがある場合は、お知らせください.

とにかく、Dynatable Web サイトには、特定の値についてテーブルをクエリする例があります。入力htmlが実際にテーブルである場合、これは機能しているように見えますが、様式化されたリストを使用している場合、私の場合は次のエラーが発生します:

Uncaught TypeError: Cannot read property 'length' of null

dynatable.jquery.js ファイルの 1582 行目にさかのぼります。

    // Find an object in an array of objects by attributes.
// E.g. find object with {id: 'hi', name: 'there'} in an array of objects
findObjectInArray: function(array, objectAttr) {
  var _this = this,
      foundObject;
  for (var i = 0, len = array.length; i < len; i++) {
    var item = array[i];
    // For each object in array, test to make sure all attributes in objectAttr match
    if (_this.allMatch(item, objectAttr, function(item, key, value) { return item[key] == value; })) {
      foundObject = item;
      break;
    }
  }

以下は私のselect要素です：

        <select id="filter-prop" name="prop">
          <option>All</option>
          <option>First Run</option>
          <option>Rejected</option>
        </select>

そして、私のリストのdynatable変換：

            // Function that renders the list items from our records
        function ulWriter(rowIndex, record, columns, cellWriter) {
          var cssClass = record.prop, li;
          if (rowIndex % 3 === 0) { cssClass += ' first'; }
          li = '<li class="' + cssClass + '"><div class="thumbnail"><div class="thumbnail-image">' + record.thumbnail + '</div><div class="caption">' + record.caption + '</div></div></li>';
          return li;
        }

        // Function that creates our records from the DOM when the page is loaded
        function ulReader(index, li, record) {
          var $li = $(li),
              $caption = $li.find('.caption');
          record.thumbnail = $li.find('.thumbnail-image').html();
          record.caption = $caption.html();
          record.label = $caption.find('h3').text();
          record.description = $caption.find('p').text();
          record.color = $li.data('color');
          record.prop = $li.attr('class');
        }

        var pictable = $('#picturelist').dynatable({
          table: {
            bodyRowSelector: 'li'
          },
          features :{
            recordCount: false,
            sorting: false,
          },
          dataset: {
            perPageDefault: 10,
            perPageOptions: [5, 10, 15, 20]
          },
          writers: {
            _rowWriter: ulWriter
          },
          readers: {
            _rowReader: ulReader
          },
          params: {
            records: 'objects'
          }
        }).data('dynatable');


        $('#filter-prop').change( function() {
            var value = $(this).val();
            if (value === "All") {
                pictable.queries.remove("Prop");
            } else if (value === "First Run") {
                pictable.queries.add("Prop","span4 firstrun rejected");
                pictable.queries.add("Prop","span4 firstrun");
            } else if (value === "Rejected") {
                pictable.queries.add("Prop","span4 firstrun rejected");
                pictable.queries.add("Prop","span4 rejected");
            };
            pictable.process();
        });

私はウェブサイトの例からあまり変わっていません。私が行ったほとんどのことは、リストの例とクエリの例をマージすることでした。繰り返しますが、同様の方法をテーブルに適用するとうまくいくように見えますが、私のリストではうまくいきません。何がうまくいかないのですか？

4

1 に答える 1

1

ドキュメントはここではあまり明確ではありませんでしたが、今日、同じ問題を自分で解決しました。正常に動作するコードは次のとおりです。

var pictable = $('#picturelist')

    .bind('dynatable:init', function(e, dynatable) {
        dynatable.queries.functions['prop'] = function(record, queryValue) {

            if ( record.prop == queryValue )
            {
                return true;
            }
            else
            {
                return false;
            }

        };
    })

    .dynatable({
        table: {
            bodyRowSelector: 'li'
        },
        features :{
            recordCount: false,
            sorting: false
        },
        dataset: {
            perPageDefault: 10,
            perPageOptions: [5, 10, 15, 20]
        },
        writers: {
            _rowWriter: ulWriter
        },
        readers: {
            _rowReader: ulReader
        },
        params: {
            records: 'objects'
        }
}).data('dynatable');


$('#filter-prop').change( function() {
    var value = $(this).val();
    if (value === "All")
    {
        pictable.queries.remove("prop");
    }
    else
    {
        pictable.queries.add("prop", value)
    }

    pictable.process();
});

乾杯

于 2014-12-26T18:53:22.687 に答える