Question

每次我显示表格时，我都会在<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>

Answer 1

解

您的代码存在许多问题：

列未对齐，因为表在隐藏时已初始化。一旦需要选项卡和表格变得可见，您需要使用columns.adjust()重新调整列宽：
```
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});
```
您正试图隐藏列＆＃34; ID＆＃34;错误，除了隐藏列导致一些问题，同时销毁表。我完全删除了ID列。
应使用$(selector).DataTable().clear().destroy()清除并销毁表格。
您正在其他事件处理程序$('#PacingModal').on('shown.bs.modal', function(){});中添加其他事件处理程序，这导致对其他事件处理程序进行不必要的多次调用。

此处未提及其他小问题。

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

＆＃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;

LINKS

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

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

1 个答案:

解

LINKS