Child Row icons not showing in SharePoint 2010/ASPX-based DataTables instance

JLyon60

I don't have an easy way to provide an example for this, since the SharePoint site is on a closed intranet, and I don't have access in the open internet to any SharePoint 2010 site where I could put together a demo. But here's what's happening.

I have an ASPX page residing on a SharePoint 2010 site that is pulling data from a SharePoint list using jQuery SPServices, and then displaying that table in a DataTables instance.

For some reason, the "+" and "-" icons to open/close the child rows are not being displayed in the SharePoint/ASPX version of the page.

I can take the same basic code (everything inside the main asp:Content block + the JS and CSS linked above it, and paste it into a vanilla HTML page, and the icons are displayed perfectly, as per the documentation and examples. But as soon as the code sits within the SharePoint ASPX page, the icons don't show up.

My guess is that there's something in the master page (which is the standard farm master page for our SharePoint farm) that may be interfering somehow, and possibly causing issues with path mapping. I've tried using the unminified sources and stepping through the creation of the DataTables list, but TBH without knowing approximately where in the code to start really stepping through, it's a bit of an exercise in time consumption.

Has anyone, and especially anyone with SharePoint 2010 experience seen something like this before?

Thanks in advance.

JLyon60

A side effect of this is that since there's no icon visible, there's no click action enabled to view/hide the child rows.

I just updated the site to have local copies of the bootstrap.css, dataTables.bootstrap.css and responsive.bootstrap.css files, thinking that perhaps that might solve the problem if it were related to relative paths, but to no avail.

JLyon60

A bit more research reveals that for some reason, when the code is placed inside the SharePoint .ASPX file and executed, the following CSS rule from responsive.bootstrap.css (starting at line 17 in the non-minified source) isn't being applied (or rather, it doesn't even appear in the applied CSS rules in the Firefox inspector when I run the .ASPX version of the code):

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
  top:9px;
  left: 4px;
  height:14px;
  width: 14px;
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white
  border-radius: 14px;
  box-shadow: 0 0 3px #444;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  line-height: 14px;
  content: '+';
  background-color: #337ab7;
}

So for my next step, even though it should be getting applied through the inclusion of responsive.bootstrap.css, I'm going to try copying the full rule and pasting it as an inline rule, and see if that makes any difference.

JLyon60

Please close this question. The issue was that when I referenced dataTables.bootstrap.css in the original location within the parent site, for some reason (not a typo) it wasn't being retrieved. I placed a copy in the local site, and everything now works as advertised.

allan

Thanks for posting back - good to hear you have it working now.

Allan