1

I am getting double checkbox one from datatables framework and one i made my self. But i wanted use only one checkbox which i made. Coz i have used my checkbox class for other job. So please let me know how can i remove datatables internal checkbox and also datatables framework should be interact with my custom checkbox. Any idea?

 <!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>
    
    </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://www.amazon.com/dp/B06Y6J869C" id="" target="_blank">LG Stylo 3 - Prepaid - Carrier Locked - Boost Mobile</a></h5>
                                    </td>
                                    <td class="sorting_1">
                                        <a href="https://www.amazon.com/dp/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 &#194;– New" id="linkText" target="_blank">HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New</a></b></h5>
    
                                    </td>
                                    <td class="sorting_1" style="text-align:left" width="30%">
                                        <h5><a href="https://www.amazon.com/dp/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://www.amazon.com/dp/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://www.amazon.com/dp/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://www.amazon.com/dp/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://www.amazon.com/dp/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://www.amazon.com/dp/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"><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']]
    
            });
        });
    
    
        
    </script>
    
    </div>
    </body>
    </html>

Improve this question

1 Answer 1

Reset to default
2 
 <!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/com/B06Y6J869C" rel="nofollow noreferrer" 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/com/B06Y6J869C" rel="nofollow noreferrer" 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 &#194;– New" id="linkText" target="_blank">HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/com/B01M0OBVW2" rel="nofollow noreferrer" 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/com/B01M0OBVW2" rel="nofollow noreferrer" 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/com/B075YR25TM" rel="nofollow noreferrer" 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/com/B075YR25TM" rel="nofollow noreferrer" 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/com/B075BHLJN7" rel="nofollow noreferrer" 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/com/B075BHLJN7" rel="nofollow noreferrer" 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"><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']]

        });
    });



</script>

</div>
</body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

i am newbie with dataTable framework. Can you plz edit in my code?
i have edited and added the entire code, you can try it
It's great that you've added the code, but it would also be great if you explained what you did so we don't have to compare two giant blocks of code to figure out what the fix was.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.