数据表列错位和重复排序箭头问题

时间:2015-06-29 17:53:55

标签: jquery datatables

每次我显示表格时,我都会在<th>添加一个额外的排序箭头。

以下是问题的图片: issue 1

我的列也没有正确对齐问题。它有时只会发生,有时它工作正常。如果单击/排序表,列将正确对齐。以下是该问题的图片链接: issue 2

每次使用不同的数据时我都必须重新初始化表格,所以我有这个:

$('#car').empty();
table2.clear().draw();

如果您知道一种更好的方法来彻底摧毁并重新创建它,请告诉我。我认为这可能导致列对齐问题。

这是Javascript代码。

function format(notes) {
    var object = notes.data;
    var out = '<table id="display" style="font-size: 12px; min-width: 90%; margin-left: 90px; margin-bottom:10px; border-bottom:1px solid lightgray;">';
    out += '<thead><tr><th class="ui-state-default">Answer</th><th  class="ui-state-default"># of Answers</th>';
    out += '<th class="ui-state-default">Percent</th></tr></thead><tbody>';
    for (var i in object) {

        out += '<tr><td>' + object[i].Answer + '</td><td>' + object[i].NumberOfAnswers + '</td><td>' + object[i].Percent + '</td></tr>'
    }

    out += '</tbody></table>';
    return out;
}

$('#PacingModal').on('shown.bs.modal', function (e) {
    var cat = $("#PacingModal").attr('category');
    var status = $("#PacingModal").attr('status');
    var taskid = $("#PacingModal").attr('taskid');

    //Fill the category Details table
    $.ajax({

        type: "POST",
        cache: false,
        dataType: 'text',
        url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php',
        data: { category: cat, statustype: status, taskid: taskid },
        beforeSend: function () {
            $('#Loading').show();
            $('#SelectContainer2').empty();
        },
        success: function (data) {
            $("#cat2").html(data);
            $('#Loading').hide();
        },
        complete: function (data) {

            var table = $("#cat2").find("#tabl").DataTable({
                "scrollY": "400px",
                "scrollCollapse": true,
                "paging": false,
                "bAutoWidth": false,
                "jQueryUI": true,
                "order": [[5, "asc"]],
                "TableTools": {
                    "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
                    "aButtons": [
                        {
                            "sExtends": "xls",
                            "sButtonText": "Excel HEY!",
                            "sFileName": "*.xls"
                        },
                    ]
                }
            });

        },
        error: function () {
            //TODO - Add auto email for error
            alert("Error retriving the data from the server! Please check back soon.");
            //Close modal if error
            $("#PacingModal").modal('hide');
        }
    });





    var TaskID = $('#PacingModal').attr('taskid');
    //var QuestionID = table2.cell('.shown', 0).data();
    var table2 = $('#car').DataTable({
        destroy: true,
        "ajax": {
            "url": "/rmsicorp/clientsite/pacingModal/surveyajax.php?TaskID=" + TaskID,
            "type": "get"
        },
        "scrollY": "400px",
        "paging": false,
        "bAutoWidth": true,
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            {
                "data": "ID",
                "type": "hidden"
            },
             { "data": "Question" },
        ],

    });


    var detailsrows = [];
    $('#car tbody').on('click', 'td.details-control', function () {
        var TaskID = $('#PacingModal').attr('taskid');
        var tr = $(this).closest('tr');
        var row = table2.row(tr);
        var cell = row.data();
        var RowID = cell.ID;
        var RID = $.inArray(tr.attr('id'), detailsrows);
        $.ajax({
            type: 'post',
            url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php',
            data: { TaskID: TaskID, QuestionID: RowID },
            dataType: 'json',
            success: function (result) {
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                    detailsrows.splice(RID, 1);
                }
                else {
                    // console.log(result);
                    row.child(format(result)).show();
                    tr.addClass('shown');

                    if (RID === -1) {
                        detailsrows.push(tr.attr('id'));
                    }

                }
            }
        });
    });

    $("#PacingModal").on('hide.bs.modal', function () {
        //empty html content out of div so the user does not see the last search before the new one loads when they click on a different option
        $('#cat2').empty();
        $('#SliderContainer2').empty();
        $('#car').empty();
        table2.clear().draw();

    });

});

这是html。两个数据表都在引导模式内的引导选项卡内。

<div id="PacingModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="ModalTitle" class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
                <div role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist" id="ModalTabs">
                        <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Category Details</a></li>
                        <li role="presentation"><a href="#PacingModalSurvey" aria-controls="Survey" role="tab" data-toggle="tab">Survey</a></li>
                        <li role="presentation"><a href="#PacingModalPhotos" aria-controls="Photos" role="tab" data-toggle="tab">Photos</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <p id="cat"></p>
                            <div id="TablContainer">
                                <div id="cat2"></div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="PacingModalSurvey">
                            <p id="surveyP">
                            </p>
                            <div id="surveyDiv">
                                <table id="car" class="display" cellspacing="0" width="100%" style="font-size: 12px;">
                                    <thead>
                                        <tr>
                                            <th class="details-control" style="max-width: 80px;">Expand</th>
                                            <th>ID</th>
                                            <th>Question</th>
                                            <!-- <th>NumberOfAnswers</th>
                                            <th>Answer</th>
                                            <th>Percent</th>-->
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th>ID</th>
                                            <th>Question</th>
                                            <!--   <th>NumberOfAnswers</th>
                                            <th>Answer</th>
                                            <th>Percent</th>-->
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>



                            <style>
                                td.details-control {
                                    background: url('/rmsicorp/clientsite/images/details_open.png') no-repeat center center;
                                    cursor: pointer;
                                }

                                tr.shown td.details-control {
                                    background: url('/rmsicorp/clientsite/images/details_close.png') no-repeat center center;
                                    cursor: pointer;
                                }
                            </style>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="PacingModalPhotos">


                            <div class="container">



                                <div class="row" id="FullClass">
                                    <div class="col-lg-12" style="padding-left: 0px !important; margin-bottom: 10px;">

                                        <h5 style="vertical-align: middle; text-align: center; color: black; font-size: 16px; font-weight: bold; text-transform: uppercase;">Photos</h5>
                                        <div id="SliderContainer2">
                                        </div>
                                        <div id="SelectContainer2">
                                            <h5>Please search for photos.</h5>
                                        </div>
                                        <div id="LoadingContainer2" style="vertical-align: central; text-align: center;">
                                            <img src="/images/Loading.gif" /><br />

                                            <span class="load">Loading...</span>
                                        </div>
                                    </div>
                                </div>



                            </div>
                        </div>
                    </div>

                    <p id="Loading" style="text-align: center; vertical-align: central;">
                        <img src="/Images/Loading.gif" />
                        <br />
                        <span>Loading.</span>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

您的代码存在许多问题:

  1. 列未对齐,因为表在隐藏时已初始化。一旦需要选项卡和表格变得可见,您需要使用columns.adjust()重新调整列宽:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
       $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
    });
    
  2. 您正试图隐藏列&#34; ID&#34;错误,除了隐藏列导致一些问题,同时销毁表。我完全删除了ID列。

  3. 应使用$(selector).DataTable().clear().destroy()清除并销毁表格。

  4. 您正在其他事件处理程序$('#PacingModal').on('shown.bs.modal', function(){});中添加其他事件处理程序,这导致对其他事件处理程序进行不必要的多次调用。

  5. 此处未提及其他小问题。

    请参阅下面的示例以了解更正后的代码。

    &#13;
    &#13;
    function format(notes) {
      var object = notes.data;
      var out = '<table class="display" style="font-size: 12px; min-width: 90%; margin-left: 90px; margin-bottom:10px; border-bottom:1px solid lightgray;">';
      out += '<thead><tr><th class="ui-state-default">Answer</th><th  class="ui-state-default"># of Answers</th>';
      out += '<th class="ui-state-default">Percent</th></tr></thead><tbody>';
      for (var i in object) {
    
        out += '<tr><td>' + object[i].Answer + '</td><td>' + object[i].NumberOfAnswers + '</td><td>' + object[i].Percent + '</td></tr>'
      }
    
      out += '</tbody></table>';
      return out;
    }
    
    $(document).ready(function() {
      // AJAX emulation for demonstration only
      $.mockjax({
        url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php',
        responseTime: 200,
        responseText: {
          "data": [{
            "Answer": 1,
            "NumberOfAnswers": 2,
            "Percent": 3
          }, {
            "Answer": 1,
            "NumberOfAnswers": 2,
            "Percent": 3
          }, {
            "Answer": 1,
            "NumberOfAnswers": 2,
            "Percent": 3
          }]
        }
      });
    
      // AJAX emulation for demonstration only
      $.mockjax({
        url: '/rmsicorp/clientsite/pacingModal/surveyajax.php',
        responseTime: 200,
        responseText: {
          "data": [{
            "ID": 1,
            "Question": "Question"
          }, {
            "ID": 2,
            "Question": "Question"
          }, {
            "ID": 3,
            "Question": "Question"
          }]
        }
      });
      
      
      // AJAX emulation for demonstration only
      $.mockjax({
        url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php',
        responseTime: 200,
        responseText: '<p class="text-center">No data</p>'
      });
    
      $('#btn-show').on('click', function() {
        var box = $('#PacingModal').modal();
      });
    
      $('#PacingModal').on('shown.bs.modal', function(e) {
        var cat = $("#PacingModal").attr('category');
        var status = $("#PacingModal").attr('status');
        var taskid = $("#PacingModal").attr('taskid');
    
        //Fill the category Details table
        $.ajax({
    
          type: "POST",
          cache: false,
          dataType: 'text',
          url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php',
          data: {
            category: cat,
            statustype: status,
            taskid: taskid
          },
          beforeSend: function() {
            $('#Loading').show();
            $('#SelectContainer2').empty();
          },
          success: function(data) {
            $("#cat2").html(data);
            $('#Loading').hide();
          },
          complete: function(data) {
    
            var table = $("#cat2").find("#tabl").DataTable({
              "scrollY": "400px",
              "scrollCollapse": true,
              "paging": false,
              "bAutoWidth": false,
              "jQueryUI": true,
              "order": [
                [5, "asc"]
              ],
              "TableTools": {
                "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
                "aButtons": [{
                  "sExtends": "xls",
                  "sButtonText": "Excel HEY!",
                  "sFileName": "*.xls"
                }, ]
              }
            });
    
          },
          error: function() {
            //TODO - Add auto email for error
            alert("Error retriving the data from the server! Please check back soon.");
            //Close modal if error
            $("#PacingModal").modal('hide');
          }
        });
    
    
        var TaskID = $('#PacingModal').attr('taskid');
        //var QuestionID = table2.cell('.shown', 0).data();
        var table2 = $('#car').DataTable({
          destroy: true,
          "ajax": {
            "url": "/rmsicorp/clientsite/pacingModal/surveyajax.php",
            "type": "get"
          },
          "scrollY": "400px",
          "scrollCollapse": true,
          "paging": false,
          "bAutoWidth": true,
          "columns": [{
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
          }, {
            "data": "Question"
          }]
    
        });
    
    
        var detailsrows = [];
        $('#car tbody').on('click', 'td.details-control', function() {
          var TaskID = $('#PacingModal').attr('taskid');
          var tr = $(this).closest('tr');
          var row = table2.row(tr);
          var cell = row.data();
          var RowID = cell.ID;
          var RID = $.inArray(tr.attr('id'), detailsrows);
          $.ajax({
            type: 'post',
            url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php',
            data: {
              TaskID: TaskID,
              QuestionID: RowID
            },
            dataType: 'json',
            success: function(result) {
              if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
                detailsrows.splice(RID, 1);
              } else {
                // console.log(result);
                row.child(format(result)).show();
                tr.addClass('shown');
    
                if (RID === -1) {
                  detailsrows.push(tr.attr('id'));
                }
    
              }
            }
          });
        });
      });
    
      $("#PacingModal").on('hidden.bs.modal', function() {
        //empty html content out of div so the user does not see the last search before the new one loads when they click on a different option
        $('#cat2').empty();
        $('#SliderContainer2').empty();
        $('#car').DataTable().clear().destroy();
      });
    
      $('#ModalTabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        if ($(e.target).attr('href') === '#PacingModalSurvey') {
          $('#car').DataTable().columns.adjust();
        }
      });
    
    });
    &#13;
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="ISO-8859-1">
    
      <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
    
    </head>
    
    <body>
      <div class="container text-center">
        <button id="btn-show" class="btn btn-primary">Show Dialog</button>
      </div>
    
      <div id="PacingModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 id="ModalTitle" class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
              <div role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist" id="ModalTabs">
                  <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Category Details</a>
                  </li>
                  <li role="presentation"><a href="#PacingModalSurvey" aria-controls="Survey" role="tab" data-toggle="tab">Survey</a>
                  </li>
                  <li role="presentation"><a href="#PacingModalPhotos" aria-controls="Photos" role="tab" data-toggle="tab">Photos</a>
                  </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <div role="tabpanel" class="tab-pane active" id="home">
                    <p id="cat"></p>
                    <div id="TablContainer">
                      <div id="cat2"></div>
                    </div>
                  </div>
                  <div role="tabpanel" class="tab-pane" id="PacingModalSurvey">
                    <p id="surveyP">
                    </p>
                    <div id="surveyDiv">
                      <table id="car" class="display" cellspacing="0" width="100%" style="font-size: 12px;">
                        <thead>
                          <tr>
                            <th class="details-control" style="max-width: 80px;">Expand</th>
                            <th>Question</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
    
                        <tfoot>
                          <tr>
                            <th></th>
                            <th>Question</th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
    
    
    
                    <style>
                      td.details-control {
                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACjElEQVR4Aa2V30uTURjHnVBUgglCaXVTJJVLMdhQm7+1JEvJiKAggmgSQiKJl0V0E13UVf0HQZmBLcvlpqa55tqV0YoMzIhY6js0yDH11X17vuO8Sq5Zgl/48DznPD/G63nOMSmBkoUNwhYhTUgn9NUeY8z5p0wqOVXYKRwQLMJhhYV7Kpaqck2rNdskbBPMdrv9osfjcQaDwW/RaHSR0OceY8xhrqox/a3ZZmGHkO9wOB7ouj6PBGKMOcxlzcqmdDYKGZmZmSWjo6PvIYosRuDWXGj50IwTb4+hxleN5sAVvJh4jvBCGBRzWSO121UPk3EAaUKuz+d7ycTp+Wnc/nwL1d4qHBVidmjZv/npBkJzGiiv19vFWmGrcVDsvKupqeky/056VMf1j9dQOViBKo9Aa/ixdbnYcrQGWsBc1jQ2NtrZQ/VKShHM8kvdEPVN9qJsoBRl/aUoHyiJ+UpcCxJTtmfCDYoHJT2yYyOlPtcaCoUmGGwdbkVRbxGK+2y0gg2GisUvNmJCy/BVUJqm/eBIxXqpgbUtiBise12HQlc+ClwFSKRCiZH6wXpQs7OzETWn6XENa/trYemywuK0IpGsTotgRU3fcVBzouWG6pOnpqY0BhuGGpDXeUjIW7JKcfuX3tjjP9k4FBkZN4PtY+042JGzzNMcGDJ35C7tmcU++tJmjE63OpSUuLEJ62GcfXUO+59kr8rJnlOY0WfAGtYaY/PHYPv9fhdEY7++4nz/BWS17UPWY0Es2avWp3vOYOTnCCheBtaqHskJr95kZBL3AvdR2XkEex5mYbdQ+qwCd97dRTAcXHn1Moyrt16PA2tN//V8jY+Pf4cS/VWerzU9sDay1gd2Xf4F/AZqlpeB9836LwAAAABJRU5ErkJggg==)
    no-repeat center center;
                        cursor: pointer;
                      }
                      tr.shown td.details-control {
                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACdUlEQVR4Aa2V30tTYRjHVSgsoQKhXPUPlKZMlImiIIg/pggiiDeCBAdqyC4Kf9zVhVdeelX33QnCbtYvxZsxxkoqKxiz1SzdFudMb5xO5/bt+fa+sPCw3IVf+PA+532e5ytn53lfK0qoSrggXBauCbUKxtxjjjVnq1IXXxFuCXeEFqGdMOYec6zRtZX/M6sWrgv1hmHcDwQCLxOJxM9CoZAnjLnHHGt0bbXdVG1cEm4KLp/P9yKXyx2jhJhjDWvZc9qUwUWhzuFwdMVisc8QFQ4PcbCygvT0NJLDw0gNDSH96DEyfj8KmQwo1rJHem8oD2VapX/sxlAo9Aqi/N4e9hYWsDMwgARxD2DH7ZZYren5eZxYFqhgMOhnr3BVeSnn216v98Hf3yqXg/X0CX719YFs9/WquJfPGtkzZ2fBWvZ4PB6DHtqrokaol7/0GqLM2hq2enpsxMmpvf3VVVD8UOJxV42Uet1Wy7J+M5mam8P37u6ySM7MgDJNM8mRUl5qYDtOREz+GB3FZlcXNjs7UUrMk/jYGKhsNnuo57TWZhgTw0hHO0EpRdpV/tvICKgjUdFQv/Lu7q7JZHxqCl9dLqGtSJtL4VJ80Wvc8xD2V9YfRUbmLZPp5WVstLTYaSWt+lmt1tISKH5Q/VFqbGOTl6GNTk7iQ3Oz4FSrU8UfuTqdBJHxceQz+2APe/8Zm+Jgh8PhNxBlt7YQNQysNzVivbEJ7wXGiiZEJiZwEI2C4mFgr/aoKnn0jk0TiWfPsTE4iHcN9xBuaMCn/n5sLy7iKJk8ffTqikfvfC4H9laWdX2lUqltaDEu9/o664LtIOVfsOf4L+APb5yaiwyN8+8AAAAASUVORK5CYII=)
     no-repeat center center;
                        cursor: pointer;
                      }
                    </style>
    
                  </div>
                  <div role="tabpanel" class="tab-pane" id="PacingModalPhotos">
    
    
                    <div class="container">
    
    
    
                      <div class="row" id="FullClass">
                        <div class="col-lg-12" style="padding-left: 0px !important; margin-bottom: 10px;">
    
                          <h5 style="vertical-align: middle; text-align: center; color: black; font-size: 16px; font-weight: bold; text-transform: uppercase;">Photos</h5>
                          <div id="SliderContainer2">
                          </div>
                          <div id="SelectContainer2">
                            <h5>Please search for photos.</h5>
                          </div>
                          <div id="LoadingContainer2" style="vertical-align: central; text-align: center;">
                            <img src="/images/Loading.gif" />
                            <br />
    
                            <span class="load">Loading...</span>
                          </div>
                        </div>
                      </div>
    
    
    
                    </div>
                  </div>
                </div>
    
                <p id="Loading" style="text-align: center; vertical-align: central;">
                  <img src="/Images/Loading.gif" />
                  <br />
                  <span>Loading.</span>
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>
    
    </html>
    &#13;
    &#13;
    &#13;

    LINKS

    有关jQuery DataTables和Bootstrap选项卡最常见问题的解决方案,请参阅jQuery DataTables – Column width issues with Bootstrap tabs