change class name of copy button
change class name of copy button
dakna
Posts: 1Questions: 1Answers: 0
Hello ,
I was unable to change the default behavior of copy button even I added class-name
my code :
<script>
$(document).ready(function()
{
var datatable= $('#mydatatable').DataTable({
"language": {
"search": "Filter records:" } ,
paging: false,
"order": [[ 2, 'asc' ]],
"info": false,
searching: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'csv', className: 'btn btn-primary glyphicon glyphicon-save-file' },
{ extend: 'excel', className: 'btn btn-primary glyphicon glyphicon-list-alt' },
{ extend: 'pdf', className: 'btn btn-primary glyphicon glyphicon-file' },
{ extend: 'print', className: 'btn btn-primary glyphicon glyphicon-print' }
]
}
);
});
</script>
my base.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css ">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" > </script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" ></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js" ></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.flash.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" ></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js" ></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.print.min.js " ></script>
<title>Django People</title>
<style>
.center {
margin: auto;
width: 50%;
padding: 10px;
}
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="page-header">
<h1>My Logo</h1>
</div>
<div class="container">
{% block content %}
{% endblock %}
</div>
</div>
<!-------------------lib of buttons copy , Excel...------------------------------------------->
<!---------------------------------------------------------------------------------------------->
{% block script %}
{% endblock %}
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
Hi @dakna ,
That looks like it should work. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin