Need help using ThemeRoller_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-02 11:12 出处：网络

I\'m using DataTables to dress up a table I\'m using to display XML results based on an XSL transformation.I have everything working from a technical sense (paging, sorting, filtering), but I\'m tryin

I'm using DataTables to dress up a table I'm using to display XML results based on an XSL transformation. I have everything working from a technical sense (paging, sorting, filtering), but I'm trying to figure out to use a ThemeRoller theme to make it look like they have on their website.

So far, I have added the following file to my project with its reference:

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"/>

and enabled ThemeRoller themes using the following as per the DataTables website:

$(document).ready(function() {
    $('#mainTable').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "two_button"
    });
});

The table gets styled, but it doesn't look right with the header rows being too wide and things being on multiple lines that should be on one line. Any indication as to what I'm doing wrong? Thanks very much in advance.

HTML code:

<html>
  <body>
    <head runat="server">
      <META http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet">
      <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript">
      </script>
      <script src="Scripts/jquery.dataTables.min.js" type="text/javascript">
      </script>
      <script type="text/javascript">
                        $(document).ready(function() {
                            $('#example').dataTable( {
                                "bJQueryUI": true
                            });
                        });
                    </script>
    </head>
    <table cellpadding="0" cellspacing="0" border="0" id="example" class="display">
      <thead>
        <tr>
          <th>
            <h3>Title</h3>
          </th>
          <th>
            <h3>URL</h3>
          </th>
          <th>
            <h3>Notes</h3>
          </th>
          <th>
            <h3>
            </h3>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a href="http://www.roperband.com">Jesse\'s Article</a>
          </td>
          <td>
            <a href="http://www.roperband.com">http://www.roperband.com</a>
          </td>
          <td>Some of Jesse\'s notes</td>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html></span>

    </div&开发者_如何学编程gt;
    <div class="clear">
    </div>
    <div class="footer">
    </div>
    </form>
</body>
</html>

I basing DataTable in this example, check the CSS you have for this example and saw this file solves the problem:

CSS:

table.display thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
    padding-right: 20px;
}

table.display thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;
}

run code

If your problem is not yet solved. Please try including jquery.ui.-1.x.x.js. I think jquery ui doesn't work without that.