Datatable не отвечает

Я создал две таблицы, обе одинаковые. Я также использую адаптивную функцию таблицы данных, чтобы сделать ее отзывчивой. Я отображаю по одной таблице за раз, а также показываю и скрываю их на основе двух переключателей, которые я создал. Проблема в том, что всякий раз, когда я переключаюсь между таблицами, если одна из них отвечает, то другая нет. Изображения стола Datatable не отвечает Когда я нажимаю переключатель, чтобы изменить таблицу 2, не отображается эта кнопка '+', когда вы меняете размер браузера, таблица 2 становится отзывчивой, но когда вы снова переключаете таблицу, вы обнаруживаете, что таблица 1 не реагирует с кнопкой '+' отсутствующий. Datatable не отвечает

Вот голова и для переключения между таблицами скрипт

<link data-require = "[email protected]" data-semver = "1.10.12" rel = "stylesheet" href = "//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel = "stylesheet" type  = "text/css" href = "https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css" />
<script src = "Scripts/jquery-3.3.1.js"></script>
<script data-require = "[email protected]" data-semver = "3.0.0" src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require = "[email protected]" data-semver = "1.10.12" src = "//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script data-require = "datatables-responsive@*" data-semver = "2.1.0" src = "//cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js">
</script>

<script type = "text/javascript">
    $(document).ready(function () {
        $('#example').DataTable({


            responsive: true


        });
        $('#example1').DataTable({


            responsive: true


        });
        iniTable();
        $.ajaxSetup({ cache: false });            

        $("input[name='DeviceType']").change(function () {
            var rbVal = $('input[name=DeviceType]:checked').val();
            $("#Loader").show().delay(5000).fadeOut();
            if (rbVal == "PID") {

                $("#example").hide(500);
                $("#example1").show(500);
            }
            else {

                $("#example1").hide(500);
                $("#example").show(500);

            }
        });
    });

    function iniTable() {
        var $radios = $('input:radio[name=DeviceType]');
        if ($radios.is(':checked') === false) {
            $radios.filter('[value=PID]').prop('checked', true);
        }
    }


    $(".close").on("click", function () {
        $(this).closest('.panel-collapse').collapse('hide');
    });
</script>

Вот тело

 <div id = "radiobtn">
    <div style = "margin-top:6px;">
        <label class = "control-label">
            Device Type
        </label>
    </div>
    <div>
        <div class = "input-group">
            <span class = "input-group-addon">
                <input name = "DeviceType" type = "radio" id = "rbTypeCID" class = "form-controlnoborder radio-inline" style = "border: none;" value = "CID">
            </span>
            <label class = "form-control">CID</label>
        </div>
    </div>
    <div>
        <div class = "input-group">
            <span class = "input-group-addon">
                <input name = "DeviceType" type = "radio" id = "rbTypePID" class = "form-controlnoborder radio-inline" style = "border: none;" value = "PID" checked = "checked">
            </span>
            <label class = "form-control">PID</label>
        </div>
    </div>
</div>
<table id = "example" class = "display nowrap" style = "display:none; width:100%" cellspacing = "0">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
        </tr>
    </tfoot>
    <tbody>           
        <tr>

            <td>Vivian</td>
            <td>Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
            <td>9422</td>
        </tr>
        <tr>

            <td>Timothy</td>
            <td>Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
            <td>7580</td>
        </tr>
        <tr>

            <td>Jackson</td>
            <td>Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
            <td>1042</td>
        </tr>
        <tr>

            <td>Olivia</td>
            <td>Liang</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
            <td>2120</td>
        </tr>
        <tr>

            <td>Bruno</td>
            <td>Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
            <td>6222</td>
        </tr>
        <tr>

            <td>Sakura</td>
            <td>Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
            <td>9383</td>
        </tr>
        <tr>

            <td>Thor</td>
            <td>Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
            <td>8327</td>
        </tr>
        <tr>

            <td>Finn</td>
            <td>Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
            <td>2927</td>
        </tr>
        <tr>

            <td>Serge</td>
            <td>Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
            <td>8352</td>
        </tr>
        <tr>

            <td>Zenaida</td>
            <td>Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
            <td>7439</td>
        </tr>
        <tr>

            <td>Zorita</td>
            <td>Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
            <td>4389</td>
        </tr>
        <tr>

            <td>Jennifer</td>
            <td>Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
            <td>3431</td>
        </tr>
        <tr>

            <td>Cara</td>
            <td>Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
            <td>3990</td>
        </tr>
        <tr>

            <td>Hermione</td>
            <td>Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
            <td>1016</td>
        </tr>
        <tr>

            <td>Lael</td>
            <td>Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
            <td>6733</td>
        </tr>            
    </tbody>
</table>

Вот таблица 2, это то же самое, только другой идентификатор

<table id = "example1" class = "display nowrap" style = "width:100%" cellspacing = "0">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
        </tr>
    </tfoot>
    <tbody>           
        <tr>

            <td>Hope</td>
            <td>Fuentes</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
            <td>6318</td>
        </tr>
        <tr>

            <td>Vivian</td>
            <td>Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
            <td>9422</td>
        </tr>
        <tr>

            <td>Timothy</td>
            <td>Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
            <td>7580</td>
        </tr>
        <tr>

            <td>Jackson</td>
            <td>Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
            <td>1042</td>
        </tr>
        <tr>

            <td>Olivia</td>
            <td>Liang</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
            <td>2120</td>
        </tr>
        <tr>

            <td>Bruno</td>
            <td>Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
            <td>6222</td>
        </tr>
        <tr>

            <td>Sakura</td>
            <td>Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
            <td>9383</td>
        </tr>
        <tr>

            <td>Thor</td>
            <td>Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
            <td>8327</td>
        </tr>
        <tr>

            <td>Finn</td>
            <td>Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
            <td>2927</td>
        </tr>
        <tr>

            <td>Serge</td>
            <td>Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
            <td>8352</td>
        </tr>
        <tr>

            <td>Zenaida</td>
            <td>Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
            <td>7439</td>
        </tr>
        <tr>

            <td>Zorita</td>
            <td>Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
            <td>4389</td>
        </tr>
        <tr>

            <td>Jennifer</td>
            <td>Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
            <td>3431</td>
        </tr>
        <tr>

            <td>Cara</td>
            <td>Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
            <td>3990</td>
        </tr>
        <tr>

            <td>Hermione</td>
            <td>Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
            <td>1016</td>
        </tr>            
    </tbody>
</table>

Я просто последовал предложению @ finw3 использовать

$('#example1').DataTable().collapse.adjust();

Он работает, но размер таблицы изменяется, столбец 1 занимает весь браузер Datatable не отвечает

создать скрипку, это было бы большим подспорьем.

— 15.03.2018 14:26

jquery html datatables

15.03.2018 14:10

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

3 564

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку при инициализации Datatables у вас есть скрытые таблицы, вам может потребоваться использовать columns.adjust() для пересчета столбцов при активации вкладки.

if (rbVal == "PID") {
  $("#wrap1").hide(500);
  $("#wrap2").show(500);
  $('#example1').DataTable().columns.adjust();
} else {
  $("#wrap2").hide(500);
  $("#wrap1").show(500);
  $('#example').DataTable().columns.adjust();
}

Я оборачиваю таблицы по div. Таким образом, входы для страниц и фильтров также скрыты.

Вот это JSFIDDLE

Привет, я только что скопировал ваш код из скрипки и запустил его в своем браузере, он работает, но не так, как в скрипке. После того, как я нажму переключатель, 1-й столбец таблицы 2 занимает всю страницу, и при переключении обратно происходит то же самое.

— 16.03.2018 05:11

15.03.2018 16:00