data tables

Report · Oct 06, 2015

Hi,

I am struggling with integration of DataTables plug-in into a website made with Muse and hosted on BC. I've seen some tutorials on BC gurus and for a while it partially worked meaning part of the CSS stylesheet for Data Tables got applied to the Data and the table. However once I changed the data on the spreadsheet and uploaded it into the BC, everything went bad. I can't get the data into the table. I am by no means a programmer or a coder, however I do know some things, but the code generated by Muse is ... I have nightmares after it . I checked the code with some on-line tools for errors and double checked all the necessary files and libraries are in their place. I will post the code below if someone could spare some time and help. I need to get the data into the table and apply the CSS.

Here is the link to the page hosted in BC: Wine List

The code:

<!DOCTYPE html>

<head>

if (typeof Muse == "undefined") window.Muse = {};

window.Muse.assets = {

"required": ["jquery-1.8.3.min.js", "museutils.js", "jquery.musemenu.js", "jquery.watch.js", "wine-list.css"],

"outOfDate": []

};

</script>

document.documentElement.className += ' js';

</script>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<div id="u475_clip">{module_contentholder, name="_U475"}</div>

</a>

{module_contentholder, name="_U438"}

</div>

</div>

{module_contentholder, name="_U439"}

</div>

{module_contentholder, name="_U151"}

</div>

</div>

</div>

</a>

</div>

</div>

</a>

</div>

<p>About</p>

</div>

</a>

</div>

<p>En Primeur</p>

</div>

</div>

</a>

<p>About En Primeur</p>

</div>

</a>

</li>

<p>Bordeaux Reports</p>

</div>

</div>

</a>

</div>

</div>

</a>

<p>Right Bank</p>

</div>

</a>

</li>

</div>

</a>

</li>

<p>Weather Report</p>

</div>

</a>

</li>

</ul>

</div>

</li>

</div>

</div>

</a>

<p>Wines</p>

</div>

</a>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

<p>Services</p>

</div>

</div>

</a>

<p>Cellar Management</p>

</div>

</a>

</li>

<p>Selling to Us</p>

</div>

</a>

</li>

<p>Buying and Selling</p>

</div>

</a>

</li>

<p>Ordering and Wine Sourcing</p>

</div>

</a>

</li>

<p>Invoicing, Payment and Delivery</p>

</div>

</a>

</li>

</ul>

</div>

</div>

</a>

</div>

<p>Contact Us</p>

</div>

</a>

</div>

<p>Career</p>

</div>

</a>

</div>

<p>Legal</p>

</div>

</div>

</a>

<p>Terms of Use</p>

</div>

</a>

</li>

<p>Privacy Policy</p>

</div>

</a>

</li>

</ul>

</div>

</nav>

<a class="nonblock nontext Button ButtonSelected shadow rounded-corners gradient clearfix colelem" id="buttonu3093" href="wine-list.html" data-href="page:U229"

data-muse-uid="U3093">

<img class="grpelem" id="u3094" alt="Wine Search" src="/images/blank.gif" />

</a>

{module_contentholder, name="_U121"}

</div>

</div>

{module_contentholder, name="_U418"}

</div>

</div>

{module_contentholder, name="_U404"}

</div>

</div>

{module_contentholder, name="_U1114"}

</div>

</div>

{module_contentholder, name="_U1117"}

</div>

</div>

{module_contentholder, name="_U1126"}

</div>

</div>

{module_contentholder, name="_U1132"}

</div>

</div>

{module_contentholder, name="_U1142"}

</div>

</div>

</nav>

</div>

{module_contentholder, name="_U2368"}

</div>

{module_contentholder, name="_U658"}

</div>

</div>

{module_contentholder, name="_U665"}

</div>

</div>

{module_contentholder, name="_U672"}

</div>

</div>

{module_contentholder, name="_U693"}

</div>

</div>

</nav>

</div>

<p id="u3117-7"><span id="u3117-6">Please enter the keyword to search for wine</span>

</p>

</div>

{module_contentholder, name="_U1368"}

</div>

{module_contentholder, name="_U1370"}

</div>

</div>

{module_contentholder, name="_U2435"}

</div>

<thead>

<tr>

<td>Colour</td>

<td>Vintage</td>

<td>Country</td>

<td>Price</td>

<td>Cases available</td>

<td>Bottle available</td>

</tr>

</thead>

<tbody>

{module_webapps,26740,a,,,,false,500,false,1}

</tbody>

</table>

</div>

{module_contentholder, name="_U1366"}

</div>

</div>

{module_contentholder, name="_U2209"}

</div>

</div>

<!--[if lt IE 9]>

<![endif]-->

</div>

if (document.location.protocol != 'https:') document.write(

'\x3Cscript src="http://musecdn1.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');

</script>

window.jQuery || document.write('\x3Cscript src="/scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');

</script>

$("#datatable-wines").css("display", "none");

$(document).ready(function() {

$(".pagination").hide();

$("#datatable-wines").DataTable();

$("#datatable-wines").css("display", "inline-block");

$("#datatable-wines_filter input").css("border", "1px solid silver");

});

</script>

$(document).ready(function() {

try {

(function() {

var a = {},

b = function(a) {

if (a.match(/^rgb/)) return a = a.replace(/\s+/g, "").match(/([\d\,]+)/gi)[0].split(","), (parseInt(a[0]) <<

16) + (parseInt(a[1]) << 8) + parseInt(a[2]);

if (a.match(/^\#/)) return parseInt(a.substr(1), 16);

return 0

};

(function() {

$('link[type="text/css"]').each(function() {

var b = ($(this).attr("href") || "").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);

b && b[1] && b[2] && (a[b[1]] = b[2])

})

})();

(function() {

$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');

for (var c = $(".version"), d = 0; d < Muse.assets.required.length;) {

var f = Muse.assets.required,

g = f.match(/([\w\-\.]+)\.(\w+)$/),

k = g && g[1] ? g[1] : null,

g = g && g[2] ? g[2] : null;

switch (g.toLowerCase()) {

case "css":

k = k.replace(/\W/gi, "_").replace(/^([^a-z])/gi, "_$1");

c.addClass(k);

var g = b(c.css("color")),

h = b(c.css("background-color"));

g != 0 || h != 0 ? (Muse.assets.required.splice(d, 1), "undefined" != typeof a && (g != a[

f] >>> 24 || h != (a & 16777215)) && Muse.assets.outOfDate.push(f)) : d++;

c.removeClass(k);

break;

case "js":

k.match(/^jquery-[\d\.]+/gi) &&

typeof $ != "undefined" ? Muse.assets.required.splice(d, 1) : d++;

break;

default:

throw Error("Unsupported file type: " + g);

}

c.remove();

if (Muse.assets.outOfDate.length || Muse.assets.required.length) c =

"Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.", (

d = location && location.search && location.search.match && location.search.match(/muse_debug/gi)

) && Muse.assets.outOfDate.length && (c += "\nOut of date: " + Muse.assets.outOfDate.join(",")), d &&

Muse.assets.required.length && (c += "\nMissing: " + Muse.assets.required.join(",")), alert(c)

})()

})();

/* body */

Muse.Utils.transformMarkupToFixBrowserProblemsPreInit(); /* body */

Muse.Utils.prepHyperlinks(true); /* body */

Muse.Utils.initWidget('.MenuBar', function(elem) {

return $(elem).museMenu();

}); /* unifiedNavBar */

Muse.Utils.fullPage('#page'); /* 100% height page */

Muse.Utils.showWidgetsWhenReady(); /* body */

Muse.Utils.transformMarkupToFixBrowserProblems(); /* body */

} catch (e) {

if (e && 'function' == typeof e.notify) e.notify();

else Muse.Assert.fail('Error calling selector function:' + e);

}

});

</script>

</body>

</html>

Thank you.

Report · Oct 15, 2015

Hi there,

At a first glance I can see that the way you are outputting the wine list (webapp list layout found in Site Manager -> Module Templates -> Web App Layouts -> list) is not really in the format that DataTables is expecting.

If your going with HTML (DOM) sourced data as exemplified in the DataTables docs, then the HTML should have a regular table format (HTML table tag)

So instead of having something like this:

<div>{tag_colour}{tag_name}{tag_vintage}{tag_country}{tag_price}{tag_per}{tag_cases available}{tag_bottles available}<br />
</div>

you should change it into something like this:

<tr>
    <td>{tag_colour}</td>
    <td>{tag_name}</td>
    <td>{tag_vintage}</td>
    <td>{tag_country}</td>
    <td>{tag_price}</td>
    <td>{tag_per}</td>
    <td>{tag_cases available}</td>
    <td>{tag_bottles available}</td>
</tr>

Oh, and by the way, the {module_webapps} should be like this:

        <table id="datatable-wines" style="display: inline-block;">
            <thead>
                <tr>
                    <td>Colour</td>
                    <td>Name</td>
                    <td>Vintage</td>
                    <td>Country</td>
                    <td>Price</td>
                    <td>Per</td>
                    <td>Cases available</td>
                    <td>Bottle available</td>
                </tr>
            </thead>
            <tbody>
              {module_webapps}
            </tbody>
        </table>

Give it a try and let me know.

M.

data tables

1 Correct answer