0
當我手動選擇項目複選框和導出項目使用CSV按鈕其工作正常，但如果點擊檢查從頂部的所有複選框只需datatables框架不garbing所有複選框選定。無論我選擇什麼，我的目標數據導出都應該可以檢查全部和手動。我該如何解決它？ ？任何想法......自定義檢查與數據表框架的所有複選框問題
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real App</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>
<script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<style>
table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox {
position: static !important;
}
</style>
</head>
<body>
<div class="container">
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap no-footer dtr-inline dataTable" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;" cellspacing="0" width="100%">
<tbody>
<tr role="row" class="pointer odd">
<td>
<input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1159" /><br />
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img id="ebayImg" src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="30%">
<h5><b><a href="http://www.ebay.com/itm/132148971575" id="titleText" value="LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New" id="linkText" target="_blank">LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New</a></b></h5>
</td>
<td class="sorting_1" style="text-align:left" width="30%">
<h5><a href="https://rads.stackoverflow.com/amzn/click/B06Y6J869C" id="" target="_blank">LG Stylo 3 - Prepaid - Carrier Locked - Boost Mobile</a></h5>
</td>
<td class="sorting_1">
<a href="https://rads.stackoverflow.com/amzn/click/B06Y6J869C" target="_blank">B06Y6J869C</a>
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 119.99
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 119.99
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
$ -17.7
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
0
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
<a class="btnWatchList" value="1159" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
<a class="deleteBulkItem" value="1159"><i class="fa fa-trash"></i></a>
</td>
</tr>
<tr role="row" class="pointer odd">
<td>
<input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1158" /><br />
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img id="ebayImg" src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="30%">
<h5><b><a href="http://www.ebay.com/itm/142129917740" id="titleText" value="HTC One A9 32GB Opal Silver for Boost Mobile – New" id="linkText" target="_blank">HTC One A9 32GB Opal Silver for Boost Mobile – New</a></b></h5>
</td>
<td class="sorting_1" style="text-align:left" width="30%">
<h5><a href="https://rads.stackoverflow.com/amzn/click/B01M0OBVW2" id="" target="_blank">HTC One A9 - Retail Packaging (Boost Mobile) - Carrier Locked - Opal Silver</a></h5>
</td>
<td class="sorting_1">
<a href="https://rads.stackoverflow.com/amzn/click/B01M0OBVW2" target="_blank">B01M0OBVW2</a>
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 120.91
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 109.99
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
$ -27.17
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
0
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
<a class="btnWatchList" value="1158" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
<a class="deleteBulkItem" value="1158"><i class="fa fa-trash"></i></a>
</td>
</tr>
<tr role="row" class="pointer odd">
<td>
<input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1157" /><br />
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img id="ebayImg" src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="30%">
<h5><b><a href="http://www.ebay.com/itm/252503208819" id="titleText" value="Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate " id="linkText" target="_blank">Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate </a></b></h5>
</td>
<td class="sorting_1" style="text-align:left" width="30%">
<h5><a href="https://rads.stackoverflow.com/amzn/click/B075YR25TM" id="" target="_blank">JAXPETY Adjustable Weight Bench Barbell Incline Flat Lifting Workout Body Press Home Gym</a></h5>
</td>
<td class="sorting_1">
<a href="https://rads.stackoverflow.com/amzn/click/B075YR25TM" target="_blank">B075YR25TM</a>
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 71.99
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 52.99
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
$ -26.98
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
0
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
<a class="btnWatchList" value="1157" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
<a class="deleteBulkItem" value="1157"><i class="fa fa-trash"></i></a>
</td>
</tr>
<tr role="row" class="pointer odd">
<td>
<input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1152" /><br />
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img id="ebayImg" src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" tabindex="0" width="5%">
<ul class="enlarge">
<!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg" height="60px" width="60px">
<span>
<!--span contains the popup image-->
<img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="30%">
<h5><b><a href="http://www.ebay.com/itm/252193780226" id="titleText" value="Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate" id="linkText" target="_blank">Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate</a></b></h5>
</td>
<td class="sorting_1" style="text-align:left" width="30%">
<h5><a href="https://rads.stackoverflow.com/amzn/click/B075BHLJN7" id="" target="_blank">JAXPETY Electric Knife Sharpener 2 Stage Kitchen Blade Sharpening System New</a></h5>
</td>
<td class="sorting_1">
<a href="https://rads.stackoverflow.com/amzn/click/B075BHLJN7" target="_blank">B075BHLJN7</a>
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 17.59
</td>
<td class="sorting_1" style="text-align:left;" width="7%">
$ 44.99
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
$ 20.58
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
0
</td>
<td class="sorting_1" style="text-align:left;" width="10%">
<a class="btnWatchList" value="1152" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
<a class="deleteBulkItem" value="1152"><i class="fa fa-trash"></i></a>
</td>
</tr>
</tbody>
<thead>
<tr role="row">
<th class="column-title">Check all: <input type="checkbox" id="checkAll" class="chkAll"></th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Ebay Image</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Amazon Image</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Ebay Title</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon Title</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">ASIN</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon price</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">eBay price</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Profit</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Sales</th>
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending"></th>
</tr>
</thead>
</table>
<!-- <link rel="stylesheet" href="/Remodal/dist/remodal.css" />
<link rel="stylesheet" href="/Remodal/dist/remodal-default-theme.css" />
<script src="/Remodal/dist/remodal.min.js"></script>
<script src="/Content/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/Content/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/Content/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/Content/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/Content/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/Content/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/Content/vendors/datatables.net-scroller/js/datatables.scroller.min.js"></script>
<script src="/Content/vendors/jszip/dist/jszip.min.js"></script>
<script src="/Content/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="/Content/vendors/pdfmake/build/vfs_fonts.js"></script> -->
<script>
var type_id;
$('select').change(function() {
type_id = this.options[this.selectedIndex].parentNode.label;
});
$(document).ready(function() {
var table = $('#datatable-responsive').DataTable({
dom: 'Bfrtip',
buttons: [
// 'copy', 'csv', 'excel', 'pdf', 'print',
{
extend: 'copy',
text: 'copy',
exportOptions: {
columns: [5, 3, 4, 7, 6],
modifier: {
selected: true
}
}
},
{
extend: 'csv',
text: 'csv',
exportOptions: {
columns: [5, 3, 4, 7, 6],
modifier: {
selected: true
}
}
},
{
extend: 'excel',
text: 'excel',
exportOptions: {
columns: [5, 3, 4, 7, 6],
modifier: {
selected: true
}
}
},
{
extend: 'pdf',
text: 'pdf',
exportOptions: {
columns: [5, 3, 4, 7, 6],
modifier: {
selected: true
}
}
},
{
extend: 'print',
text: 'print',
exportOptions: {
modifier: {
selected: true
}
}
},
],
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
checkboxes: {
selectRow: true
}
}],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
});
//checkbox selection process
$("#checkAll").click(function() {//check and uncheck all function
$('input:checkbox').not(this).prop('checked', this.checked);
});
//checkbox selection process ends
</script>
</div>
</body>
</html>
你能在我的完整代碼上實現它嗎？我試過，但即使複選框選擇所有被選中的所有數據不與數據表架構導出。在此先感謝 –
試試這個：https://jsfiddle.net/Preservin/vdv2me3g/ – Konservin