All geek questions in one place

Need help using ThemeRoller

I use DataTables to dress up a table that I use to display XML results based on an XSL transform. I have everything that works in a technical sense (paging, sorting, filtering), but I'm trying to understand ThemeRoller theme so that it looks as if they are on their website.

So far I have added the following file to my project with a link:

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

and included ThemeRoller themes using the following on the DataTables website:

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

A table is styled, but it doesn’t look right when the header lines are too wide and things are on several lines, which should be on the same line. Any indication of what I'm doing wrong? Thank you 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\ Article</a>
          </td>
          <td>
            <a href="http://www.roperband.com">http://www.roperband.com</a>
          </td>
          <td>Some of Jesse\ notes</td>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html></span>

    </div>
    <div class="clear">
    </div>
    <div class="footer">
    </div>
    </form>
</body>
</html>
+3
2

DataTable , CSS, , :

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;
}

+4

. jquery.ui.-1.x.x.js. , jquery ui .

0

Source: https://habr.com/ru/post/1783252/

More articles:


All Articles