I'm experiencing issues with my DataTables after upgrading to version 2.0.
The message I get is
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #.carttaxtypes-0_info
I think it's to do with this line of dataTables.js not being able to support escaped characters in the jQuery selector:
if (! $('#' + tid+'_info', settings.nWrapper).length) {
The same code works fine on DataTables 1.x
Sample full HTML page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<div class='row mb-3'>
<div class='col-12'>
<h2 class='drawSQLtabletitle'>
<i class="fas fa-database DBTicon" aria-hidden="true"></i>
Cart Tax Types
</h2>
</div>
</div>
<table id=".carttaxtypes-0" class="table table-striped table-transparent" style="width:100%">
<thead>
<tr>
<th class="TH-countryID exportable" data-priority="2" style="width:auto">Country</th>
<th class="TH-taxratename exportable" data-priority="3" style="width:auto">Tax Rate Name</th>
<th class="TH-taxratedesc exportable" data-priority="4" style="width:auto">Tax Rate Description</th>
<th class="TH-taxperc exportable" data-priority="5" style="width:auto">Tax Percentage</th>
<th class="TH-defaultrate exportable" data-priority="6" style="width:auto">Is Default Rate</th>
<th class="TH2-edit" data-priority="1" style="width:180px">Actions</th>
</tr>
</thead>
<tbody>
<tr id="row1" data-rowID="1">
<td style="width:auto">United Kingdom</td>
<td style="width:auto">Standard</td>
<td style="width:auto">All other taxable goods and services</td>
<td style="width:auto">20</td>
<td style="width:auto;text-align:center" data-sort="1">
<i class="fas fa-check" aria-hidden="true"></i>
</td>
<td style="width:200px;text-align:center">
X
</td>
</tr>
<tr id="row2" data-rowID="2">
<td style="width:auto">United Kingdom</td>
<td style="width:auto">Reduced</td>
<td style="width:auto">Children’s car seats; certain social housing; some social services; electricity, natural gas and district heating supplies (for domestic use only); some energy-saving domestic installations and goods; LPG and heating oil (for domestic use only); some renovation and repairs of private dwellings; s...</td>
<td style="width:auto">5</td>
<td style="width:auto;text-align:center" data-sort="0">
<i class="fas fa-times" aria-hidden="true"></i>
</td>
<td style="width:200px;text-align:center">
X
</td>
</tr>
<tr id="row3" data-rowID="3">
<td style="width:auto">United Kingdom</td>
<td style="width:auto">Zero</td>
<td style="width:auto">Some social housing; printed books (excluding e-books); newspapers and periodicals; renovations to private housing (Isle of Man only); collections of domestic refuse; household water supplies (except distilled and mineral water); supplies of food and drink (some exceptions); take away food (if bo...</td>
<td style="width:auto">0</td>
<td style="width:auto;text-align:center" data-sort="0">
<i class="fas fa-times" aria-hidden="true"></i>
</td>
<td style="width:200px;text-align:center">
X
</td>
</tr>
</tbody>
</table>
<div id="AMTRAholder" class="AMcontextmenu"></div>
<input id="AM-criteria" name="AM-criteria" type="hidden" value="">
<script>
$('#\\.carttaxtypes-0').DataTable({
retrieve: true
});
</script>