在jsfiddle工作但不在我的页面上的tablesorter

时间:2013-10-03 15:32:32

标签: jquery

的jsfiddle:http://jsfiddle.net/BKgue/2/

由于某种原因,它不适用于我的页面。我现在已经编辑了私人数据,这个测试页面也不起作用。任何帮助将不胜感激。

这说我的帖子主要是代码。

<html>
<head>
<link rel="stylesheet" href="css/console.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jq.css" type="text/css" media="screen" />
<script src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
 <script type="text/javascript">
$('#top-table').tablesorter({
    // *** Appearance ***
    // fix the column widths
    widthFixed : true,
    // include zebra and any other widgets, options:
    // 'uitheme', 'filter', 'stickyHeaders' & 'resizable'
    // the 'columns' widget will require custom css for the
    // primary, secondary and tertiary columns
    widgets    : [ 'uitheme', 'zebra' ],
    // other options: "ddmmyyyy" & "yyyymmdd"
    dateFormat : "mmddyyyy",

    // *** Functionality ***
    // starting sort direction "asc" or "desc"
    sortInitialOrder : "asc",
    // These are detected by default,
    // but you can change or disable them
    headers : {
        // set "sorter : false" (no quotes) to disable the column
        0: { sorter: "text" },
        1: { sorter: "digit" },
        2: { sorter: "text" },
        3: { sorter: "url" }
    },
    // extract text from the table - this is how is
    // it done by default
    textExtraction : {
        0: function(node) { return $(node).text(); },
        1: function(node) { return $(node).text(); }
    },
    // forces the user to have this/these column(s) sorted first
    sortForce : null,
    // initial sort order of the columns
    // [[columnIndex, sortDirection], ... ]
    sortList : [],
    // default sort that is added to the end of the users sort
    // selection.
    sortAppend : null,
    // Use built-in javascript sort - may be faster, but does not
    // sort alphanumerically
    sortLocaleCompare : false,
    // Setting this option to true will allow you to click on the
    // table header a third time to reset the sort direction.
    sortReset: false,
    // Setting this option to true will start the sort with the
    // sortInitialOrder when clicking on a previously unsorted column.
    sortRestart: false,
    // The key used to select more than one column for multi-column
    // sorting.
    sortMultiSortKey : "shiftKey",

    // *** Customize header ***
    onRenderHeader  : function() {
        // the span wrapper is added by default
        $(this).find('span').addClass('headerSpan');
    },
    // jQuery selectors used to find the header cells.
    selectorHeaders : 'thead th',

    // *** css classes to use ***
    cssAsc        : "headerSortUp",
    cssChildRow   : "expand-child",
    cssDesc       : "headerSortDown",
    cssHeader     : "header",
    tableClass    : 'tablesorter',

    // *** widget css class settings ***
    // column classes applied, and defined in the skin
    widgetColumns : { css: ["primary", "secondary", "tertiary"] },
    // find these jQuery UI class names by hovering over the
    // Framework icons on this page:
    // http://jqueryui.com/themeroller/
    widgetUitheme : { css: [
        "ui-icon-arrowthick-2-n-s", // Unsorted icon
        "ui-icon-arrowthick-1-s",   // Sort up (down arrow)
        "ui-icon-arrowthick-1-n"    // Sort down (up arrow)
        ]
    },
    // pick rows colors to match ui theme
    widgetZebra: { css: ["ui-widget-content", "ui-state-default"] },

    // *** prevent text selection in header ***
    cancelSelection : true,

    // *** send messages to console ***
    debug : true
});
        </script>

        </head>
        <body>
        <table id='top-table' class='tablesorter'><thead><tr>
            <th class='top-header-cell col1'>CONTROL_ID</th>
            <th class='top-header-cell col2'>STATUS</th>
            <th class='top-header-cell col3'>OWNER</th>
            <th class='top-header-cell col4'>FILE_NAME</th>
            <th class='top-header-cell col5'>LINE_CNT</th>
            <th class='top-header-cell col6'>BYTE_CNT</th>
            <th class='top-header-cell col7'>CREATE_DT</th>
            <th class='top-header-cell col8'>CHKSUM</th>
            <th class='top-header-cell col9'>TXN</th>
            <th class='top-header-cell col10'>ORG FName</th>
            <th class='top-header-cell col11'>File Dir</th>
            <th class='top-header-cell col12'>INT_EXT_FLG</th>
            <th class='top-header-cell col13'>PID</th>
            <th class='top-header-cell col14'>PRIORITY</th>
            <th class='top-header-cell col15'>OSTIMESTAMP</th>
            <th class='top-header-cell col16'>FINAL_TBL_NAME</th>
            <th class='top-header-cell col17'>CNSL_FILE_MV_LU_ID</th>
            <th class='top-header-cell col18'>Last Name</th>
            <th class='top-header-cell col19'>Delimiter</th>
            <th class='top-header-cell col20'>NO_TOKENS</th>
            <th class='top-header-cell col21'>Min Length</th>
            <th class='top-header-cell col22'>Max Length</th>
            <th class='top-header-cell col23'>Head Data</th>
            <th class='top-header-cell col24'>Tail Data</th>
            </tr></thead><tbody id='scroll_me'>
<tr>
    <td class='top-body-cell col1'><div>55017</div></td>
    <td class='top-body-cell col2'><div>30</div></td>
    <td class='top-body-cell col3'><div>P</div></td>
    <td class='top-body-cell col4'><div>P.xxx.rcb.tda.out</div></td>
    <td class='top-body-cell col5'><div>9345</div></td>
    <td class='top-body-cell col6'><div>9167445</div></td>
    <td class='top-body-cell col7'><div>27-SEP-13</div></td>
    <td class='top-body-cell col8'><div>3032901441</div></td>
    <td class='top-body-cell col9'><div>TDA</div></td>
    <td class='top-body-cell col10'><div>rcb.tda.out.pgp</div></td>
    <td class='top-body-cell col11'><div></div></td>
    <td class='top-body-cell col12'><div></div></td>
    <td class='top-body-cell col13'><div>30767</div></td>
    <td class='top-body-cell col14'><div></div></td>
    <td class='top-body-cell col15'><div>Sep 27 14:10</div></td>
    <td class='top-body-cell col16'><div></div></td>
    <td class='top-body-cell col17'><div>1016</div></td>
    <td class='top-body-cell col18'><div>aLoader</div></td>
    <td class='top-body-cell col19'><div></div></td>
    <td class='top-body-cell col20'><div>1</div></td>
    <td class='top-body-cell col21'><div>980</div></td>
    <td class='top-body-cell col22'><div>980</div></td>
    <td class='top-body-cell col23'><div>02/07/201302</div></td>
    <td class='top-body-cell col24'><div>02/07/201302</div></td>
</tr>
<tr>
    <td class='top-body-cell col1'><div>59384</div></td>
    <td class='top-body-cell col2'><div>90</div></td>
    <td class='top-body-cell col3'><div>BO006</div></td>
    <td class='top-body-cell col4'><div>BOT6.59384.xxx.HHtoRM201102.csv</div></td>
    <td class='top-body-cell col5'><div>2649531</div></td>
    <td class='top-body-cell col6'><div>145838345</div></td>
    <td class='top-body-cell col7'><div>18-SEP-13</div></td>
    <td class='top-body-cell col8'><div>2054991495</div></td>
    <td class='top-body-cell col9'><div></div></td>
    <td class='top-body-cell col10'><div></div></td>
    <td class='top-body-cell col11'><div></div></td>
    <td class='top-body-cell col12'><div></div></td>
    <td class='top-body-cell col13'><div></div></td>
    <td class='top-body-cell col14'><div></div></td>
    <td class='top-body-cell col15'><div></div></td>
    <td class='top-body-cell col16'><div></div></td>
    <td class='top-body-cell col17'><div></div></td>
    <td class='top-body-cell col18'><div></div></td>
    <td class='top-body-cell col19'><div></div></td>
    <td class='top-body-cell col20'><div></div></td>
    <td class='top-body-cell col21'><div></div></td>
    <td class='top-body-cell col22'><div></div></td>
    <td class='top-body-cell col23'><div></div></td>
    <td class='top-body-cell col24'><div></div></td>
</tr>
<tr>
    <td class='top-body-cell col1'><div>59385</div></td>
    <td class='top-body-cell col2'><div>90</div></td>
    <td class='top-body-cell col3'><div>BO</div></td>
    <td class='top-body-cell col4'><div>BO938v</div></td>
    <td class='top-body-cell col5'><div>2655733</div></td>
    <td class='top-body-cell col6'><div>146178874</div></td>
    <td class='top-body-cell col7'><div>18-SEP-13</div></td>
    <td class='top-body-cell col8'><div>2165512106</div></td>
    <td class='top-body-cell col9'><div></div></td>
    <td class='top-body-cell col10'><div></div></td>
    <td class='top-body-cell col11'><div></div></td>
    <td class='top-body-cell col12'><div></div></td>
    <td class='top-body-cell col13'><div></div></td>
    <td class='top-body-cell col14'><div></div></td>
    <td class='top-body-cell col15'><div></div></td>
    <td class='top-body-cell col16'><div></div></td>
    <td class='top-body-cell col17'><div></div></td>
    <td class='top-body-cell col18'><div></div></td>
    <td class='top-body-cell col19'><div></div></td>
    <td class='top-body-cell col20'><div></div></td>
    <td class='top-body-cell col21'><div></div></td>
    <td class='top-body-cell col22'><div></div></td>
    <td class='top-body-cell col23'><div></div></td>
    <td class='top-body-cell col24'><div></div></td>
</tr>


    </tbody></table>    
        </body></html>

1 个答案:

答案 0 :(得分:0)

您导入的scripts底部低于实际的script代码。检查你的控制台,我确定有一些未被捕获的引用以及没有tablesorter方法。解决方案:在尝试使用脚本之前导入脚本!

<!-- page specific plugin scripts -->

    <script src="assets/js/bootstrap-tag.min.js"></script>
    <script src="assets/js/jquery.hotkeys.min.js"></script>
    <script src="assets/js/bootstrap-wysiwyg.min.js"></script>
    <script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="assets/js/jquery.slimscroll.min.js"></script>

    <script>//NOW USE YOUR TABLESORTER FUNC</script>