【问题标题】:jQuery DataTables - initial search doesn't locate proper recordsjQuery DataTables - 初始搜索未找到正确的记录
【发布时间】:2014-04-08 21:17:23
【问题描述】:

当我输入搜索“CRUZ”时,即使有名称“CRUZ”,表格也不会显示任何结果。当我添加任何字母然后删除该字母时,表格会正确显示记录。

我很困惑为什么会发生这种情况。我的配置是否有问题要修复它以使初始搜索正常工作?

jQuery DataTables 的调试代码:ikehar http://debug.datatables.net/ikehar

<script>
  $.extend(true, $.fn.dataTable.defaults, {
    "sDom": "<'row-fluid'<'span9'l><'span3'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sLengthMenu": "_MENU_ records per page"
    }
  });
  $.extend( $.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline"
  });
  $.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function(oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function(e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };
            $(nPaging).addClass('pagination').append('<ul>' + '<li class="prev disabled"><a href="#">← ' + oLang.sPrevious + '</a></li>' + '<li class="next disabled"><a href="#">' + oLang.sNext + ' → </a></li>' + '</ul>');
            var els = $('a', nPaging);
            $(els[0]).bind('click.DT', {
                action: "previous"
            }, fnClickHandler);
            $(els[1]).bind('click.DT', {
                action: "next"
            }, fnClickHandler);
        },
        "fnUpdate": function(oSettings, fnDraw) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, ien, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
            if (oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            } else if (oPaging.iPage <= iHalf) {
                iStart = 1;
                iEnd = iListLength;
            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }
            for (i = 0, ien = an.length; i < ien; i++) {
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();
                for (j = iStart; j <= iEnd; j++) {
                    <a href="/ref#sClass">sClass</a> = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                    $('<li ' + <a href="/ref#sClass">sClass</a> + '><a href="#">' + j + '</a></li>')
                        .insertBefore($('li:last', an[i])[0])
                        .bind('click', function(e) {
                        e.preventDefault();
                        oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                        fnDraw(oSettings);
                    });
                }
                if (oPaging.iPage === 0) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
});
if ($.fn.DataTable.TableTools) {
    $.extend(true, $.fn.DataTable.TableTools.classes, {
        "container": "DTTT btn-group",
        "buttons": {
            "normal": "btn",
            "disabled": "disabled"
        },
        "collection": {
            "container": "DTTT_dropdown dropdown-menu",
            "buttons": {
                "normal": "",
                "disabled": "disabled"
            }
        },
        "print": {
            "info": "DTTT_print_info modal"
        },
        "select": {
            "row": "active"
        }
    });
    $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
        "collection": {
            "container": "ul",
            "button": "li",
            "liner": "a"
        }
    });
}
  $(document).ready(function() {
    $('#orders').dataTable({
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "iDisplayLength": 50,
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
  });
</script>

【问题讨论】:

  • 我很高兴这个字符“/”导致了所有这些问题..
  • 您能否更具体一点,您指的是哪个“/”?谢谢!
  • 我在控制台中遇到错误。我会先解决这个问题,Uncaught TypeError: Object [object Object] has no method 'fnPagingInfo'

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


【解决方案1】:

尝试将整个代码块包装在 document.ready 函数中:

$(文档).ready(函数() { $.extend(true, $.fn.dataTable.defaults, { "sDom": "r>t>", "sPaginationType": "引导程序", “语言”:{ "sLengthMenu": "_MENU_ 每页记录数" } }); $.extend($.fn.dataTableExt.oStdClasses, { “sWrapper”:“dataTables_wrapper 表单内联” }); $.extend($.fn.dataTableExt.oPagination, { “引导”:{ “fnInit”:函数(oSettings,nPaging,fnDraw){ var oLang = oSettings.oLanguage.oPaginate; var fnClickHandler = 函数(e){ e.preventDefault(); if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) { fnDraw(o设置); } }; $(nPaging).addClass('分页').append('
    ' + '←' + oLang.sPrevious + '' + '' + oLang.sNext + ' → ' + '
'); var els = $('a', nPaging); $(els[0]).bind('click.DT', { 行动:“以前” }, fnClickHandler); $(els[1]).bind('click.DT', { 行动:“下一步” }, fnClickHandler); }, “fnUpdate”:函数(oSettings,fnDraw){ var iListLength = 5; var oPaging = oSettings.oInstance.fnPagingInfo(); var an = oSettings.aanFeatures.p; var i, ien, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2); if (oPaging.iTotalPages = (oPaging.iTotalPages - iHalf)) { iStart = oPaging.iTotalPages - iListLength + 1; iEnd = oPaging.iTotalPages; } 别的 { iStart = oPaging.iPage - iHalf + 1; iEnd = iStart + iListLength - 1; } for (i = 0, ien = an.length; i sClass = (j == oPaging.iPage + 1) ? 'class="active"' : ''; $('sClass + '>' + j + '') .insertBefore($('li:last', an[i])[0]) .bind('点击',函数(e) { e.preventDefault(); oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength; fnDraw(o设置); }); } 如果(oPaging.iPage === 0){ $('li:first', an[i]).addClass('disabled'); } 别的 { $('li:first', an[i]).removeClass('disabled'); } 如果(oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0){ $('li:last', an[i]).addClass('disabled'); } 别的 { $('li:last', an[i]).removeClass('disabled'); } } } } }); 如果($.fn.DataTable.TableTools){ $.extend(true, $.fn.DataTable.TableTools.classes, { "container": "DTTT btn-group", “纽扣”: { “正常”:“btn”, “已禁用”:“已禁用” }, “收藏”: { "container": "DTTT_dropdown 下拉菜单", “纽扣”: { “普通的”: ””, “已禁用”:“已禁用” } }, “打印”: { "info": "DTTT_print_info 模态" }, “选择”: { “行”:“活动” } }); $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, { “收藏”: { “容器”:“ul”, “按钮”:“里”, “班轮”:“一个” } }); } $('#orders').dataTable({ "sDom": "r>t>", “iDisplayLength”:50, "sPaginationType": "引导程序", “语言”:{ "sLengthMenu": "_MENU_ 每页记录数" } }); });

【讨论】:

  • 将所有内容放在 document.ready 函数中并没有改变任何内容。
  • 您是否查看过控制台中报告的错误?
  • 它引用了这一行 var oPaging = oSettings.oInstance.fnPagingInfo();
  • 我现在正在处理这个问题,但我认为这不会影响过滤,而是它们的分页。
  • 我相当肯定那是你的问题。当您在搜索框中输入时,在同一行代码中输入的每个字母都会出错。
【解决方案2】:

我错过了对 jQuery DataTables 的另一个引用,导致搜索和过滤错误。下面的正确工作解决方案:

<script>
  $.extend(true, $.fn.dataTable.defaults, {
      "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
      "sPaginationType": "bootstrap",
      "oLanguage": {
          "sLengthMenu": "_MENU_ records per page"
      }
  });
  $.extend($.fn.dataTableExt.oStdClasses, {
      "sWrapper": "dataTables_wrapper form-inline"
  });
  $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
      return {
          "iStart": oSettings._iDisplayStart,
          "iEnd": oSettings.fnDisplayEnd(),
          "iLength": oSettings._iDisplayLength,
          "iTotal": oSettings.fnRecordsTotal(),
          "iFilteredTotal": oSettings.fnRecordsDisplay(),
          "iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
          "iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
      };
  };
  $.extend($.fn.dataTableExt.oPagination, {
      "bootstrap": {
          "fnInit": function(oSettings, nPaging, fnDraw) {
              var oLang = oSettings.oLanguage.oPaginate;
              var fnClickHandler = function(e) {
                  e.preventDefault();
                  if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                      fnDraw(oSettings);
                  }
              };
              $(nPaging).addClass('pagination').append('<ul>' + '<li class="prev disabled"><a href="#">← ' + oLang.sPrevious + '</a></li>' + '<li class="next disabled"><a href="#">' + oLang.sNext + ' → </a></li>' + '</ul>');
              var els = $('a', nPaging);
              $(els[0]).bind('click.DT', {
                  action: "previous"
              }, fnClickHandler);
              $(els[1]).bind('click.DT', {
                  action: "next"
              }, fnClickHandler);
          },
          "fnUpdate": function(oSettings, fnDraw) {
              var iListLength = 5;
              var oPaging = oSettings.oInstance.fnPagingInfo();
              var an = oSettings.aanFeatures.p;
              var i, ien, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

              if (oPaging.iTotalPages < iListLength) {
                  iStart = 1;
                  iEnd = oPaging.iTotalPages;
              } else if (oPaging.iPage <= iHalf) {
                  iStart = 1;
                  iEnd = iListLength;
              } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
                  iStart = oPaging.iTotalPages - iListLength + 1;
                  iEnd = oPaging.iTotalPages;
              } else {
                  iStart = oPaging.iPage - iHalf + 1;
                  iEnd = iStart + iListLength - 1;
              }
              for (i = 0, ien = an.length; i < ien; i++) {
                  $('li:gt(0)', an[i]).filter(':not(:last)').remove();
                  for (j = iStart; j <= iEnd; j++) {
                      sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                      $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
                          .insertBefore($('li:last', an[i])[0])
                          .bind('click', function(e) {
                          e.preventDefault();
                          oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                          fnDraw(oSettings);
                      });
                  }
                  if (oPaging.iPage === 0) {
                      $('li:first', an[i]).addClass('disabled');
                  } else {
                      $('li:first', an[i]).removeClass('disabled');
                  }
                  if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                      $('li:last', an[i]).addClass('disabled');
                  } else {
                      $('li:last', an[i]).removeClass('disabled');
                  }
              }
          }
      }
  });
  if ($.fn.DataTable.TableTools) {
      $.extend(true, $.fn.DataTable.TableTools.classes, {
          "container": "DTTT btn-group",
          "buttons": {
              "normal": "btn",
              "disabled": "disabled"
          },
          "collection": {
              "container": "DTTT_dropdown dropdown-menu",
              "buttons": {
                  "normal": "",
                  "disabled": "disabled"
              }
          },
          "print": {
              "info": "DTTT_print_info modal"
          },
          "select": {
              "row": "active"
          }
      });
      $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
          "collection": {
              "container": "ul",
              "button": "li",
              "liner": "a"
          }
      });
  }
  $(document).ready(function() {
      $('#orders').dataTable({
          "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
          "sPaginationType": "bootstrap",
          "iDisplayLength": 50,
          "oLanguage": {
              "sLengthMenu": "_MENU_ records per page"
          }
      });
  });
</script>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多