Публикация, чтобы помочь кому-то спасти какое-то время ... Я должен отдать должное DataTables.net, у них довольно хорошая поддержка, но документация может быть хитрой.
После еще нескольких копаний и под руководством форума DataTables.Net. Вот что я придумала. В итоге я использовал DataTables.Net Downloader, чтобы сгенерировать все файлы CSS и Js в виде двух пакетных файлов со всеми функциями, которые я пытался добавить. Так что вместо DLing их по отдельности было всего 2 файла в пачках. Вот ссылка для загрузки
Тогда Связки закончились как это.
bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
"~/DataTables/dataTables.min.js"
));
bundles.Add(new StyleBundle("~/Content/DataTables").Include(
"~/DataTables/dataTables.min.css"
))
Затем на странице «Макет» или на вашей HTML-странице, где будут жить таблицы. включать сценарии и контент
Поместите контент в голову.
@Styles.Render("~/Content/DataTables")
Поместите скрипт перед закрывающим тегом
@Scripts.Render("~/bundles/DataTables")
На странице мой HTML практически не изменился. Я добавил классы BootStrap CSS для таблиц.
<table id="MyTable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
<th>
Center
</th>
<th>
Account
</th>
<th>
Ledger
</th>
</tr>
</thead>
<tbody>
В разделе сценариев для этой страницы.
Пара вещей здесь ... Документация немного разбросана, но есть несколько различных способов настроить это. Например, может быть раздел Ajax, и кнопки могут быть объявлены напрямую или созданы отдельно с помощью конструктора New.
<script type="text/javascript">
$(function () {
var table = $('#MyTable').DataTable({
ajax: {
url: 'Ajax Call for data',
dataSrc: 'data'
},
columns: [
{ data: 'Center' },
{ data: 'Account' },
{ data: 'Ledger' }
]
});
new $.fn.dataTable.Buttons( table, {
buttons: [
'copy', 'excel', 'pdf'
]
});
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
});
</script>