jquery - 在排序过滤后,jquery dataTables插件是否可以遵循备用行颜色?

jquery - 在排序过滤后,jquery dataTables插件是否可以遵循备用行颜色?,第1张

我正在使用jquery datatables plugin,它似乎是一个有用的插件,可以使用常规的html表并添加排序,过滤,分页等

我看到的一个问题是,当我搜索它似乎没有更新“奇数”/“偶数”行类,所以如果我的表有100行但是当我过滤它有10时可能是所有10个都是相同的背景颜色或8是相同的背景颜色

在按照列排序之后,我看到了同样的问题,在按照列排序后,它可能会“聚集”一堆具有相同背景颜色的行。

无论如何,datatables插件可以在滤镜后重新应用偶数/奇怪的样式,所以无论你过滤什么,总有交替的行背色?

最佳答案:

4 个答案:

答案 0 :(得分:21)

原因

默认情况下,此功能可用。很可能是这种不寻常行为的原因:

  • 您可以覆盖CSS中的oddeven类,或
  • 过滤后,您的代码会影响表格结构

解决方案#1

  1. Default stylingjQuery UIFoundation

    display使用课程<table>,如下所示。请参阅Default styling options以获取所有可用类的列表。

    <table id="example" class="display" cellspacing="0" width="100%">   
    

    请参阅this jsFiddle进行演示。

  2. Bootstrap

    table table-striped table-bordered使用课程<table>,如下所示:

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    

    请参阅this jsFiddle进行演示。

  3. 解决方案#2

    如果有一个CSS规则覆盖oddeven类,您可以指示jQuery DataTables使用替代类而不是stripeClasses选项。

    $('#example').DataTable( {
      "stripeClasses": [ 'odd-row', 'even-row' ]
    } );
    

    答案 1 :(得分:16)

    要归档此内容,您必须使用Base style - no styling classes datatable 要执行此操作,只需从table tag

    中删除数据表类

    在此之后为odd(例如myodd)和even(例如myeven)行创建自己的类。

    现在接下来的任务是将这些类应用于每个表绘制的表行:

    1。应用过滤器时

    2. 当可见记录的限制更改等时

    为此,数据表提供rowCallback(),您可以这样使用:

     $('#myTabel').dataTable({
            "rowCallback": function( row, data, index ) {
                if(index%2 == 0){
                    $(row).removeClass('myodd myeven');
                    $(row).addClass('myodd');
                }else{
                    $(row).removeClass('myodd myeven');
                     $(row).addClass('myeven');
                }
              }
        });
    

    请注意:

    要避免!important css rulecss rule定义odd eventable.dataTable tbody tr.myeven{ background-color:#f2dede; } table.dataTable tbody tr.myodd{ background-color:#bce8f1; } 这样的行:

    try:
        import real_module
    except SyntaxError:
        print('You need to run this with Python 3')
    

    DEMO: http://jsfiddle.net/ishandemon/4za80xky/

    答案 2 :(得分:2)

    我的这条评论适用于如何删除或修改Jquery Datatable Row类

    Datatables现在提供一个可选的json参数,其名称为其1.10 documentation定义。

    所以如果你想完全删除奇数偶数类,那么在表初始化期间使用以下参数。

    $('#example').dataTable( {
      "stripeClasses": [] //Empty Array.
    } );
    

    所以如果你想在Datatables的每一行上应用自定义css类那么。

    $('#example').dataTable( {
      "stripeClasses": ['yourRowClass']
    } );
    

    如果你想应用超过1个css类(以奇数偶数或顺序方式),这样这些类将在每第n行完成后重复它们 - 然后使用这个

    $('#example').dataTable( {
      "stripeClasses": [ 'strip1', 'strip2', 'strip3' ] //This combination will repeat always 3rd row
    } );
    

    DataTables将按顺序应用每个类,并在需要时循环。

    答案 3 :(得分:0)

    我知道这已经过时了,但我不得不扩展上述解决方案。我允许用户调整条纹颜色,所以我必须这样做:

    rowCallback: (row, data, index) => {
      const stripeColor = this.options.stripeColor;
    
      if (index % 2 == 0) {
        $(row).removeClass('odd-row even-row');
        $(row).addClass('odd-row');
    
        if (!!this.options.stripe) {
          $(row).css({ background: 'transparent' })
        }
      } else {
    
        $(row).removeClass('odd-row even-row');
        $(row).addClass('even-row');
    
        if (!!this.options.stripe) {
          $(row).css({ background: stripeColor })
        }
      }
    },
    
    本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复