點這里進入ABP進階教程目錄
下載插件
打開Datatables官網(https://datatables.net/download/)
勾選Extensions/Buttons，下載插件，復制到JD.CRS.Web.Mvc\wwwroot\lib\dataTables目錄．
引入插件
打開展示層(即JD.CRS.Web.Mvc)的Views/Course/Index.cshtml //Course查詢視圖
添加以下代碼，引入插件．
<link href="~/lib/dataTables/DataTables/css/jquery.dataTables.css" rel="stylesheet" asp-append-version="true" /> <link href="~/lib/dataTables/Buttons/css/buttons.dataTables.css" rel="stylesheet" asp-append-version="true" /> <script src="~/lib/dataTables/DataTables/js/jquery.dataTables.js" asp-append-version="true"></script> <script src="~/lib/dataTables/Buttons/js/dataTables.buttons.js" asp-append-version="true"></script> <script src="~/lib/dataTables/Buttons/js/buttons.flash.js" asp-append-version="true"></script> <script src="~/lib/dataTables/Buttons/js/buttons.html5.js" asp-append-version="true"></script> <script src="~/lib/dataTables/Buttons/js/buttons.print.js" asp-append-version="true"></script> <script src="~/lib/dataTables/JSZip/jszip.js" asp-append-version="true"></script> <script src="~/lib/dataTables/pdfmake/pdfmake.js" asp-append-version="true"></script> <script src="~/lib/dataTables/pdfmake/vfs_fonts.js" asp-append-version="true"></script>
更新配置
打開展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查詢相關腳本
自帶按鈕有五個：
Copy //復制到剪貼板
CSV //匯出CSV
Excel //匯出Excel
PDF //匯出PDF
Print //列印
基礎系結
采用默認格式
//Button buttons: [ 'copy', //復制到剪貼板 'csv', //匯出CSV 'excel', //匯出Excel 'pdf', //匯出PDF 'print' //列印 ],
定制系結
采用自定義格式
buttons: [ { extend: 'copy', text: '復制' //可以中文 }, { extend: 'csv', text: 'CSV' //可以英文 }, { extend: 'excel', text: 'Excel' }, { extend: 'pdf', text: 'PDF' }, { extend: 'print', text: '<i >print</i>' //可以圖示 } ],
預覽效果
基礎系結
定制系結
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/107335.html
標籤：.NET Core
上一篇：.NET成人禮 | 還記得20年前一起拖過的控制元件嗎？
下一篇：.net core 攔截器的使用