HTML和Javascript中的分页

问题描述 投票:-1回答:1

当我添加以下内容时,我正在尝试调试为什么分页不起作用。我得到标题和表格格式,但在我之前和之后添加脚本时不会发生分页。我认为我已经正确地设置了表名和变量,但也许有人可以指出一些明显不合适的东西。

<head>
   <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.combined.js" integrity="sha256-AQTn9CwiNvZG2zsoT0gswugjZp0alCQySLyt9brT9Cg="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.js" integrity="sha256-serXvhbeEKdQIfTFSD3wpNCGNx2+/9py7VXfwLhYTfk="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.widgets.js" integrity="sha256-U+0DXO4scYcNVpt7pnud6Fx3KZqK2I5mI6KOeAjSqOE="
    crossorigin="anonymous"></script>

</head>
    <div id="eldetail">
                <script>
            $(function(){

    // initialize custom pager script BEFORE initializing tablesorter/tablesorter pager
    // custom pager looks like this:
    // 1 | 2 ??? 5 | 6 | 7 ??? 99 | 100
    //   _       _   _        _     adjacentSpacer
    //       _           _          distanceSpacer
    // _____               ________ ends (2 default)
    //         _________            aroundCurrent (1 default)

    var $table = $('data'),
      $pager = $('.pager');

    $.tablesorter.customPagerControls({
      table          : $table,                   // point at correct table (string or jQuery object)
      pager          : $pager,                   // pager wrapper (string or jQuery object)
      pageSize       : '.left a',                // container for page sizes
      currentPage    : '.right a',               // container for page selectors
      ends           : 2,                        // number of pages to show of either end
      aroundCurrent  : 1,                        // number of pages surrounding the current page
      link           : '<a href="#">{page}</a>', // page element; use {page} to include the page number
      currentClass   : 'current',                // current page class name
      adjacentSpacer : '<span> | </span>',       // spacer for page numbers next to each other
      distanceSpacer : '<span> &#133; <span>',   // spacer for page numbers away from each other (ellipsis = &#133;)
      addKeyboard    : true,                     // use left,right,up,down,pageUp,pageDown,home, or end to change current page
      pageKeyStep    : 10                        // page step to use for pageUp and pageDown
    });

    // initialize tablesorter & pager
    $table
      .tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'columns', 'filter']
      })
      .tablesorterPager({
        // target the pager markup - see the HTML block below
        container: $pager,
        size: 10,
        output: 'showing: {startRow} to {endRow} ({filteredRows})'
      });

  });
            </script>
<table id="data"><thead>
            <tr><th style="width:225px;">ID</th><th style="width:175px;">Time</th><th style="width:75px;">Level</th><th>Name</th><th>Message</th><th>Server Name</th></tr>

            </thead>
            <tfoot>
            <tr><th style="width:225px;">ID</th><th style="width:175px;">Time</th><th style="width:75px;">Level</th><th>Name</th><th>Message</th><th>Server Name</th></tr>

            <tr>
              <td colspan="7">
                <div class="pager">
                  <nav class="left">
                    # per page:
                    <a href="#" class="current">10</a> |
                    <a href="#">25</a> |
                    <a href="#">50</a> |
                    <a href="#">100</a>
                  </nav>
                  <nav class="right">
                    <span class="prev">
                      <img src="/icons/prev.png" /> Prev&nbsp;
                    </span>
                    <span class="pagecount"></span>
                    &nbsp;<span class="next">Next
                      <img src="/icons/next.png" />
                    </span>
                  </nav>
                </div>
              </td>
            </tr>
          </tfoot><tbody><tr class="item"><td>2002</td><td>03/19/2019 06:01:43</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>2002</td><td>03/19/2019 06:01:42</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>2002</td><td>03/19/2019 06:01:42</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>2002</td><td>03/19/2019 06:01:42</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>10016</td><td>03/19/2019 01:20:57</td><td>Error</td><td>Microsoft-Windows-DistributedCOM</td><td>The application-specific permission settings do not grant Local Activation permission for the COM Server application with CLSID 
{8BC3F05E-D86B-11D0-A075-00C04FB68820}
 and APPID 
{8BC3F05E-D86B-11D0-A075-00C04FB68820}
 to the user  SID (S-1-5-21-1957994488-1532298954-725345543-8060) from address LocalHost (Using LRPC) running in the application container Microsoft.Windows.ContentDeliveryManager_10.0.17134.1_neutral_neutral_cw5n1h2txyewy SID (S-1-15-2-350187224-1905355452-1037786396-3028148496-2624191407-3283318427-1255436723). This security permission can be modified using the Component Services administrative tool.</td><td>Server1</td></tr>
<tr class="item"><td>0</td><td>03/19/2019 01:05:51</td><td></td><td>Office 2016 Licensing Service</td><td></td><td>Server1</td></tr></tbody></div></table><br>
javascript jquery tablesorter
1个回答
1
投票

你必须小心,有不同版本的插件。

在插件页面上,我发现:https://mottie.github.io/tablesorter/beta-testing/example-pager-custom-controls.html

    <script src="https://mottie.github.io/tablesorter/docs/js/jquery-latest.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.combined.js" integrity="sha256-AQTn9CwiNvZG2zsoT0gswugjZp0alCQySLyt9brT9Cg=" 
    crossorigin="anonymous"></script>-->
    <script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
    <script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>

    <script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
    <script src="https://mottie.github.io/tablesorter/beta-testing/pager-custom-controls.js"></script>

加上#

 var $table = $('#data')

和colspan

colspan="6"

在tbody中添加更多tr以查看效果

© www.soinside.com 2019 - 2024. All rights reserved.